Question

所以我的目标是拥有一个纯粹的CSS背景图像，它可以淡入淡出不同的图像..它的工作原理很棒，我只是想知道是否还有更快的转换，所以我不这样做必须看到两个图像一起放松..我知道有不同的方法来控制如何使用计时功能发生转换 - 我只是想知道是否还有其他方法？我尝试使用不同的关键帧停止点来调用下一个图像，然后将2％的相同图像调用到我的脑海中，更快地完成转换，但它似乎不起作用..任何想法？

http://jsfiddle.net/FE948/

<div></div>   

body {
background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/02/headerbg.jpg') !important;}
@-webkit-keyframes slider {
 25% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/02/headerbg.jpg');}
 48% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg2.jpg');}
 50% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg2.jpg');}
 73% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg3.jpg');}
 75% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg3.jpg');}
 97% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/02/headerbg.jpg');}
 99% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/02/headerbg.jpg');}
}

body {
-webkit-animation-direction: normal;
-webkit-animation-duration: 27s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: slider;
-webkit-animation-timing-function: ease;
}

提前致谢！

Answer 1

使用以下关键帧百分比。

@-webkit-keyframes slider {
    32% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/02/headerbg.jpg');}
    34% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg2.jpg');}
    65% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg2.jpg');}
    67% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg3.jpg');}
    98% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg3.jpg');}
    100% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/02/headerbg.jpg');}

}

这些应该允许更快的过渡。

我可以更快地在CSS动画中进行转换吗？

1 个答案: