Чистый CSS3 crossfade

Question

Я работаю над чистым CSS3 кроссфейдером между изображениями. Проблема у меня в том, что его только два изображения и, когда второе изображение исчезает, она исчезает на белый, а не зацикливание прямо назад к изображению 1.

Мой не так работает скрипку здесь: http://jsfiddle.net/uQU6y/2/

.item img { 
    position:absolute; 
    left:0; 
    top:0; 
    -webkit-animation-name: fade; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 6s; 
    animation-name: fade; 
    animation-iteration-count: infinite; 
    animation-duration: 6s; 
} 

@-webkit-keyframes fade { 
    0% {opacity: 0;} 
    20% {opacity: 1;} 
    33% {opacity: 1;} 
    53% {opacity: 0;} 
    100% {opacity: 0;} 
} 

#f2 { 
    -webkit-animation-delay: -4s; 
} 

Answer 1

Ну, оказывается, это было простое исправление таймингов CSS и размещение кода анимации. Код, который я использовал, отлично работал с 3 изображениями, однако для 2 мне нужно было изменить продолжительность анимации, чтобы удалить затухание до белого. Я также должен был поместить информацию о анимации (продолжительность итерации, имя и т.д.) Вот JSfiddle: http://jsfiddle.net/uQU6y/7/

Ключевая часть кода:

#f2 { 
    z-index:999; 
    -webkit-animation-name: fade; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 10s; 
    animation-name: fade; 
    animation-iteration-count: infinite; 
    animation-duration: 10s; 
} 

Answer 2

Привет, пожалуйста, jsfiddle Вы указали id="f1" в html, но вы не использовали его в css.

Answer 3

Это использует совсем другой метод, но из внешнего вида вашего примера это может быть именно то, что вам нужно. http://jsfiddle.net/ericjbasti/uQU6y/4/ это чистый кроссфейд css, который использует то, как текущие браузеры исчезают в фоновых изображениях.

.image1{ 
    background-image:url(http://placehold.it/290x350); 
} 
.image1:hover{ 
    background-image:url(http://placehold.it/290x350/000000/ffffff); 
} 

Для моего быстрого примера все им делать это парить эффект, но вы можете легко управлять этим путем внесения изменений в имя класса.

Answer 4

1This решение может быть улучшено. Если вы используете реальные изображения, вы ясно увидите, что изначально происходит грубый переход. Это происходит потому, что вы установили f2 на 999. Используйте это вместо:

#f1 { 
    z-index:999; 
    -webkit-animation-name: fade; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 10s; 
    animation-name: fade; 
    animation-iteration-count: infinite; 
    animation-duration: 10s; 
} 

Затем измените немного анимации следующим образом:

@-webkit-keyframes fade { 
    0% {opacity: 1;} 
    20% {opacity: 0;} 
    33% {opacity: 0;} 
    53% {opacity: 1;} 
    100% {opacity: 1;} 
} 
@keyframes fade { 
    0% {opacity: 1;} 
    20% {opacity: 0;} 
    33% {opacity: 0;} 
    53% {opacity: 1;} 
    100% {opacity: 1;} 
} 

Это будет переход # f1 вместо # f2, который означает, что анимация является гладкой от начала до.