Chrome CSS 3转换不平滑

Question

您好工作在一个新网站的网站设计和主页有一些使用CSS3转换的flyup菜单。

如果你去---------看看“好菜单”，“另一个酷菜单”等链接在Chrome的主页上，当你鼠标悬停他们的飞机出现，但过渡不平稳，菜单标签出现像上下振动。我包括下面的CSS，但它可以在网站上的style.css文件中找到（相关部分开始于1905行）

这只是在铬，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; 
} 

Answer 1

您正在导致browser reflows，这是昂贵的，并改变每个动画步骤的布局，导致干扰和抖动。

要解决这个问题，就需要绝对定位应用到您的动画元素，添加以下内容到你的CSS将让你开始：

.home .main-navigation ul { 
    position: relative; 
    height: 180px; 
} 

.home .main-navigation ul li { 
    position: absolute; 
    display: block; 
} 

.home .main-navigation ul li:nth-child(1) { left: 0;} 
.home .main-navigation ul li:nth-child(2) { left: 25%;} 
.home .main-navigation ul li:nth-child(3) { left: 50%;} 
.home .main-navigation ul li:nth-child(4) { left: 75%;} 

这只是一个起点，你将不得不写更多CSS以正确显示您的元素与绝对定位。

Answer 2

首先，我不得不说，菜单看起来光滑。我可以将它用于一个项目。你用什么WP主题？太棒了！

值得注意的是，当Chrome浏览器呈现它们时，CSS动画看起来就像是一个错误。我为你提供了两种解决方案（他们都需要一些工作）：

1.使用animate.css查看预编译的CSS动画是否更好，并且在Chrome上保持稳定。 http://daneden.me/animate/

2.使用jQuery为菜单添加动画，这也是一个稳定的解决方案。