chrome css动画上的抖动 [英] Jitter on chrome css animations
问题描述
通过使用两个具有相同背景图像[svg]的居中div并对其宽度和背景位置设置动画,尝试制作一个从中心淡入图像的css动画。问题是,在chrome上,存在一个可怕的抖动问题(也许是chrome循环遍历了动画步骤,而不是同时执行它们?)
Trying to make a css animation that fades in on an image from the center by using two centered divs with the same background image [svg], and animating their width and background position. The problem is, on chrome, there's a terrible jitter problem (Maybe from chrome cycling through the animation steps, instead of doing them simultaneously?)
这是jsfiddle: http://jsfiddle.net/evankford/s2uRV/4/ ,您可以在其中看到抖动问题
Here's the jsfiddle: http://jsfiddle.net/evankford/s2uRV/4/, where you can see the jitter problem on the left one (which has simultaneous width animation and background-position animation).
相关代码(很抱歉,该网站所在网站的部分剩余内容)
Relevant Code (sorry for some leftover stuff from the site it's in)
HTML:
<div class="underheader-wrapper uhw-title">
<div class="underheader uhleft undertitle"> </div>
<div class="underheader uhright undertitle"> </div>
</div>
和CSS:
.undertitle {
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
background-image:url(http://cereusbright.com/newsite/presskit/images/underheader.svg);
}
.underheader-wrapper {
position: relative;
margin: auto;
width:320px;
height:100px;
}
.underheader {
-webkit-backface-visibility: hidden;
position:absolute;
width: 0px;
height:100px;
opacity: 0;
background-size: 320px 60px;
background-repeat: no-repeat;
-moz-animation-delay: 3s; -webkit-animation-delay:3s;
-moz-animation-duration: 3s; -webkit-animation-duration: 3s;
-moz-animation-name: part1; -webkit-animation-name:part1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards}
.uhleft {
background-position: -160px 40px;
right: 160px;
-webkit-backface-visibility: hidden;
-moz-animation-delay: 3s; -webkit-animation-delay:3s;
-moz-animation-duration: 3s; -webkit-animation-duration: 3s;
-moz-animation-name: part2; -webkit-animation-name:part2;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards}
.uhright {
background-position: -160px 40px;
left: 160px;}
@-webkit-keyframes part1 {
from {
width: 0px;
opacity: 0;
}
to {
width: 160px;
opacity: 1;
}}
@-webkit-keyframes part2 {
from {
background-position:-160px 40px;
width: 0px;
opacity: 0;
}
to {
width: 160px;
background-position: 0px 40px;
opacity: 1;
}}
@-moz-keyframes part1 {
from {
width: 0px;
opacity: 0;
}
to {
width: 160px;
opacity: 1;
}}
@-moz-keyframes part2 {
from {
background-position:-160px 40px;
width: 0px;
opacity: 0;
}
to {
background-position: 0px 40px;
width: 160px;
opacity: 1;
}}
我坚持这种抖动吗?我已经做过一个JQuery版本,发现有人说CSS较干净/平滑,但是仍然出现抖动。
Am I stuck with this jitter? I already did a JQuery version, and found people saying that CSS was cleaner/smoother, but the jitter still happens.
推荐答案
好,没有找到使用双重div来实现此目标的方法。相反,我做了这样的事情。
Okay, didn't find a way to use dual divs to achieve this goal. Instead, I did something like this.
<div class="outer">
<div class="middle">
<div class"inner">
 
</div>
</div>
</div>
然后为它们设置样式
.outer {
position: relative;
width:321px;
height:100px;
padding: 15px;
}
.middle {
text-align: center;
position: absolute;
left: 160px;
margin:auto;
background-image:url(images/underheader.svg);
background-position:center center;
background-size: 320px 70px;
background-repeat: no-repeat;
/*all the animation stuff */
}
.inner {
position: relative;
display: inline-block;
width: 0px;
height: 100px;
/* all the animation stuff */
}
然后我将中间div从 left:160px
到 left:0px
,内部div从 width:0px
到宽度:320px。
我使用CSS动画,尽管很容易通过jquery或CSS转换来完成。
I then animated the middle div from left:160px
to left: 0px
and the inner div from width: 0px
to width: 320px.
I used CSS animation, though it could easily be done with jquery or CSS transitions.
这篇关于chrome css动画上的抖动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!