Как сделать идеальную кросс-увядающую анимацию?

Я пытаюсь сделать четыре креста затухающих изображений друг над другом. У меня есть это, но у него есть небольшая проблема.Как сделать идеальную кросс-увядающую анимацию?

<div> 
    <img class="first-img" src="img1.jpg"> 
    <img class="second-img" src="img2.jpg"> 
    <img class="third-img" src="img3.jpg"> 
    <img class="fourth-img" src="img4.jpg"> 
</div>

CSS:

img { 
position: absolute; 
top: 0; 
left: 0; 
animation: crossfade 20s infinite; 
} 

.first-img { 
z-index: 4; 
} 

.second-img { 
z-index: 3; 
animation-delay: 5s; 
} 

.third-img { 
z-index: 2; 
animation-delay: 10s; 
} 

.fourth-img { 
z-index: 1; 
animation-delay: 15s; 
} 

@keyframes crossfade { 
0% {opacity: 1;} 
15% {opacity: 1;} 
25% {opacity: 0;} 
90% {opacity: 0;} 
100% {opacity: 1;} 
}

Проблема начинается после последнего изображения (четвертого), четвертое изображение отходит на задний план, а затем первое изображение начинает снова зацикливание. Я хочу избавиться от этого странного разреза между концом цикла, где последнее изображение постепенно исчезает в фоновом режиме. Какими будут идеальные значения анимации, чтобы сделать четвертое изображение кроссфейдами непосредственно с первым изображением в цикле конец?

источник

2013-11-12 Magdi Gamal

отлично работает для меня: http://jsfiddle.net/fUEnk/ –

Пример с изображениями также работает отлично http://jsfiddle.net/M8tbD/5/ – DaniP

Ruirize и Danko, OP справа. Последнее изображение начинает исчезать до цвета фона, прежде чем первое изображение начнет исчезать. См. Http://codepen.io/gpetrioli/pen/hyrjl –

Если вы заметили, это не только последнее изображение .. это все из них после первого цикла.

Это происходит потому, что ваши изображения начинаются с opacity:1 (значение по умолчанию). Но после того, как они начали анимацию, keyframes берет под контроль opacity, так что теперь они все 0, за исключением двух, которые перекрестно увядают каждый раз.

В то время как они являются затухающими, одно от 0-1, а другое от 1-0, они находятся на разных этапах полупрозрачности, поэтому фон также будет кровоточить. Единственный способ избежать этого, заключается в постепенном исчезновении нового изображения поверх существующего, и после того, как он будет полностью показан, установите предыдущий в 0 непрозрачность.

Попробуйте

@keyframes crossfade { 
    0% {opacity: 1; z-index:10} 
    15% {opacity: 1;} 
    25% {opacity: 0;} 
    80% {opacity: 0; z-index:1} 
    90% {opacity: 1;} 
    100% {opacity: 1; z-index:1} 
}

Демо на http://codepen.io/gpetrioli/pen/hyrjl

источник

2013-11-12 17:36:30

Да, большое вам спасибо! Это объясняет, что происходит, и исправляло это также, thx. –

Как сделать идеальную кросс-увядающую анимацию?

ответ

Смежные вопросы