こんにちは、新しいサイトのサイト デザインに取り組んでおり、ホームページには CSS3 トランジションを使用したフライアップ メニューがいくつかあります。
--------- にアクセスして、Chrome のホームページにある「いくつかの素敵なメニュー」、「別のクールなメニュー」などのリンクを見てみると、それらの上にマウスを置くとフライアップが表示されます。しかし、移行はスムーズではなく、メニュー ラベルが上下に振動しているように見えます。以下に CSS を含めましたが、サイトの style.css ファイルで利用できます (関連する部分は 1905 行目から始まります)。
これは chrome のみで、Safari と Firefox は正常に動作し、IE は...まあ、今はそれについて話さないでください....
.home #site-navigation .menu-main-menu-container .trait-box {
width: 100%;
}
.home .main-navigation ul,
.home .main-navigation {
margin: none;
border: none;
}
.home .main-navigation ul li {
border: none;
}
.home .main-navigation ul li a {
margin-left: 0;
margin-right: 0;
}
.home .trait-box {
margin-top: 480px;
display: block;
text-align: center;
height: 126px;
position: relative;
color: #4e4e4d;
text-decoration: none !important;
}
.home .trait-box h4 {
position: absolute;
bottom: 35px;
width: 90%;
font-size: 16px;
font-size: 1.14285714rem;
line-height: 20px;
line-height: 1.25;
font-family: 'ProximaNovaSemibold', Arial, Helvetica;
font-weight: normal;
color: #D06F4A;
margin-left: 5%;
}
.home .trait-box figure {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 0;
opacity: 0;
}
.home .trait-box figure img {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: auto;
}
.home .trait-box dl {
border-top-color: #D06F4A;
border-top-style: solid;
border-top-width: 12px;
position: absolute;
top: 0px;
}
.home .trait-box.main-menu-orange dl {
border-top-color: #D06F4A;
border-top-style: solid;
border-top-width: 12px;
}
.home .trait-box.main-menu-teal dl {
border-top-color: #405C69;
border-top-style: solid;
border-top-width: 12px;
}
.home .trait-box.main-menu-blue dl {
border-top-color: #5E7599;
border-top-style: solid;
border-top-width: 12px;
}
.home .trait-box.main-menu-green dl {
border-top-color: #A9B800;
border-top-style: solid;
border-top-width: 12px;
}
.home .trait-box dd {
font-size: 15px;
font-size: 1.07142857rem;
line-height: 19px;
line-height: 1.266666667;
margin-bottom: 12px;
font-family: Georgia, Times, 'Times New Roman', serif;
color: #595959;
padding: 0 10px;
overflow: hidden;
height: 0;
opacity: 0;
margin-top: 20px;
}
.home .trait-box dd span {
white-space: nowrap;
display: block;
width: 70%;
padding: 3px 0;
margin: 38px auto 40px;
background: #D06F4A;
font-size: 15px;
font-size: 1.07142857rem;
font-family: 'ProximaNova', Arial, Helvetica, sans-serif;
text-transform: uppercase;
padding: 5px 10px;
padding-top: 12px;
color: #ffffff;
opacity: 0;
}
.home .trait-box.main-menu-orange dd span {
background-color: #D06F4A;
}
.home .trait-box.main-menu-blue dd span {
background-color: #5E7599;
}
.home .trait-box.main-menu-teal dd span {
background-color: #405C69;
}
.home .trait-box.main-menu-green dd span {
background-color: #A9B800;
}
.home .trait-box,
.trait-box figure,
.trait-box dd,
.trait-box dl,
.trait-box dd span {
-webkit-transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98);
-webkit-transition-delay: 0;
-moz-transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98) 0;
-o-transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98) 0;
transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98) 0;
}
.home .trait-box:hover,
.trait-box.expanded {
margin-top: 0;
padding-top: 400px;
-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
background: white;
}
.home .trait-box:hover figure,
.trait-box.expanded figure {
height: 184px;
opacity: 1;
}
.home .trait-box:hover dl {
margin-top: 184px;
}
.home .trait-box:hover dd,
.trait-box.expanded dd {
height: 170px;
opacity: 1;
}
.home .trait-box:hover dd span,
.trait-box.expanded dd span {
opacity: 1;
}
.home .trait-box:hover dd span:hover,
.trait-box.expanded dd span:hover {
}
.home .trait-box:hover,
.trait-box.expanded {
-webkit-transition-duration: 225ms;
-moz-transition-duration: 225ms;
-o-transition-duration: 225ms;
transition-duration: 225ms;
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
-o-transition-delay: 100ms;
transition-delay: 100ms;
}
.home .trait-box:hover figure,
.trait-box.expanded figure {
-webkit-transition-duration: 225ms;
-moz-transition-duration: 225ms;
-o-transition-duration: 225ms;
transition-duration: 225ms;
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
-o-transition-delay: 100ms;
transition-delay: 100ms;
}
.home .trait-box:hover dl,
.trait-box.expanded dl {
-webkit-transition-duration: 225ms;
-moz-transition-duration: 225ms;
-o-transition-duration: 225ms;
transition-duration: 225ms;
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
-o-transition-delay: 100ms;
transition-delay: 100ms;
}
.home .trait-box:hover dd,
.trait-box.expanded dd {
-webkit-transition-duration: 540ms;
-moz-transition-duration: 540ms;
-o-transition-duration: 540ms;
transition-duration: 540ms;
-webkit-transition-delay: 500ms;
-moz-transition-delay: 500ms;
-o-transition-delay: 500ms;
transition-delay: 500ms;
}
.home .trait-box:hover dd span,
.trait-box.expanded dd span {
-webkit-transition-duration: 540ms;
-moz-transition-duration: 540ms;
-o-transition-duration: 540ms;
transition-duration: 540ms;
-webkit-transition-delay: 1100ms;
-moz-transition-delay: 1100ms;
-o-transition-delay: 1100ms;
transition-delay: 1100ms;
}