Html Chrome CSS 3 过渡不平滑
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17754561/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome CSS 3 Transition Not Smooth
提问by dpegasusm
Hi working on a site design for a new site and the homepage has some flyup menus using CSS3 transitions.
您好，正在为新站点设计站点，主页有一些使用 CSS3 转换的弹出式菜单。
If you go to --------- and take a look at the "Some Menu that is nice", "Another Cool Menu", etc. links on the homepage in chrome, when you mouse over them the flyups appear but the transition is not smooth and the menu label appears like it is vibrating up and down. I included the CSS below but it is available in the style.css file on the site (relevant parts start on line 1905)
如果您转到 --------- 并查看 chrome 主页上的“一些不错的菜单”、“另一个很酷的菜单”等链接，当您将鼠标悬停在它们上方时，会出现浮窗但过渡不平滑，菜单标签看起来像是在上下振动。我在下面包含了 CSS，但它可以在网站上的 style.css 文件中找到（相关部分从 1905 行开始）
This is only in chrome, Safari and Firefox work fine and IE... well lets not talk about that right now....
这仅适用于 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;
}
回答by methodofaction
You are causing browser reflows, which are expensive and change the layout on each animation step, causing the jerkyness and jitterness.
您正在导致浏览器回流，这是昂贵的并且在每个动画步骤上更改布局，导致生涩和抖动。
To work around this, you need to apply absolute positioning to your animated elements, adding this to your CSS will get you started:
要解决此问题，您需要对动画元素应用绝对定位，将其添加到您的 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%;}
This is just a starting point, you will have to write more CSS in order to correctly display your elements with absolute positioning.
这只是一个起点，您必须编写更多 CSS 才能以绝对定位正确显示您的元素。
回答by Shaan Singh
First of all, I have to say that the menu looks slick. I could use that for a project. What WP theme are you using? It is awesome!
首先，我不得不说菜单看起来很光滑。我可以将它用于项目。您使用的是什么 WP 主题？太棒了！
On a serious note, it seems as though the CSS animations are just causing a bug when Chrome renders them. I have two solutions for you (both of them would require some work):
严肃地说，CSS 动画似乎只是在 Chrome 呈现它们时引起错误。我有两个解决方案（它们都需要一些工作）：
1.Use animate.css to see if the prebuilt CSS animations are made better and are stable on Chrome. http://daneden.me/animate/
1.使用 animate.css 查看预构建的 CSS 动画在 Chrome 上是否做得更好和稳定。http://daneden.me/animate/
2.Animate the menu with jQuery, which would also be a stable solution.
2.使用 jQuery 动画菜单，这也是一个稳定的解决方案。
