Question

好的，我的.featured部分的背景非常适合我希望它转换的方式。

但是如何让它循环？ I.E分为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/

ANSWER将使用具有默认背景图像的正确语法

@-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. 
}

Fiddle

Answer 2

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

Fiddle sample

背景图像循环过渡CSS3

2 个答案: