css - 背景图像循环过渡CSS3

Question

好的，所以我的 .featured 部分的背景可以完美地按照我希望的方式进行转换。

但是我如何让它循环呢？IE 去 0%, 33%, 66%, 0% 等等？

@-webkit-keyframes test{
0% {
    background-image: url('../img/15.jpg');
}
33% {
    background-image: url('../img/151.jpg');
}
66% {
    background-image: url('../img/152.jpg');
} 
}
/*Featured Content Background*/
.featured { 
background-image: url('../img/15.jpg');
width: 100%;
height: 470px;
margin: auto 0px;
margin-top: -446px;
-webkit-transition: margin-top 1s;
transition-delay: margin-top 0.2s;

-webkit-animation-name: test;
-webkit-animation-duration: 5s;
-webkit-iteration-count: 2;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
}

http://jsfiddle.net/gmRyM/

答案是使用正确的语法和默认背景图像

@-webkit-keyframes test{
0% {
    background-image: url('http://www.polydevs.com/mystery/img/15.jpg');
}
33% {
    background-image: url('http://www.polydevs.com/mystery/img/151.jpg');
}
66% {
    background-image: url('http://www.polydevs.com/mystery/img/152.jpg');
}
}
/*Featured Content Background*/
.featured { 
background-image: url('http://www.polydevs.com/mystery/img/15.jpg');
width: 100%;
height: 470px;
margin: auto 0px;
/*margin-top: -446px;*/
-webkit-transition: margin-top 1s;
transition-delay: margin-top 0.2s;

-webkit-animation-name: test;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
}

Answer 1

看一下这个 ：

@-webkit-keyframes test{
0% {
    background-image: url('http://www.polydevs.com/mystery/img/15.jpg');
}
33% {
    background-image: url('http://www.polydevs.com/mystery/img/151.jpg');
}
100% {              //Complete the loop.
    background-image: url('http://www.polydevs.com/mystery/img/152.jpg');
    }
}

.featured { 
/*background-image: url('../img/15.jpg');*/
width: 100%;
height: 470px;
margin: auto 0px;
/*margin-top: -446px;*/
-webkit-transition: margin-top 1s;
transition-delay: margin-top 0.2s;

-webkit-animation-name: test;
-webkit-animation-duration: 5s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite; --> add this line. 
}

小提琴

Answer 2

虽然您已经找到了必须是的拼写错误-webkit-iteration-count，-webkit-animation-iteration-count但循环的真正解决方案不是指定默认图像，而是实际完成动画 - 现在它没有 66% 到 100% 之间的关键帧。以 100% 添加关键帧以使其正确循环。

Fiddle sample