小编eva*_*ord的帖子

尝试通过使用具有相同背景图像[svg]的两个居中div来制作从​​中心淡入图像的css动画,并设置其宽度和背景位置的动画.问题是,在chrome上,存在一个可怕的抖动问题(可能是通过动画步骤进行chrome循环,而不是同时进行？)

这里是jsfiddle:http://jsfiddle.net/evankford/s2uRV/4/,你可以看到左边的抖动问题(同时具有宽度动画和背景位置动画).

相关代码(对于其所在网站的一些剩余内容感到抱歉)

HTML:

    <div class="underheader-wrapper uhw-title">
       <div class="underheader uhleft undertitle">&nbsp;</div>
       <div class="underheader uhright undertitle">&nbsp;</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: …