background loop loop transition CSS3

Question

Хорошо, поэтому фон моей .featured секции отлично работает, как я хочу, чтобы он переходил.

Но как это сделать? I.E go 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. 
} 

Fiddle

Answer 2

Пока вы уже нашли misspelt -webkit-iteration-count, который должен быть -webkit-animation-iteration-count, истинное решение для цикла - не указать изображение по умолчанию, а фактически завершить анимацию - теперь он не имеет ключевых кадров от 66% до 100%. Добавьте ключевой кадр на 100%, чтобы сделать его правильно.

Fiddle sample