Как сделать идеальную анимацию перекрестного затухания?

Question

Как сделать идеальную анимацию перекрестного затухания?

0

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

 <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;}
 }

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

Magdi Gamal 12 нояб. 2013, в 18:40

Источник

1

У меня отлично работает: jsfiddle.net/fUEnk
Steffan Donal 12 нояб. 2013, в 17:05
0

Пример с изображениями также отлично работает jsfiddle.net/M8tbD/5
DaniP 12 нояб. 2013, в 17:12
0

Руириз и Данко, ОП прав. Последнее изображение начинает исчезать до цвета фона, прежде чем 1-е изображение начинает исчезать .. см. Codepen.io/gpetrioli/pen/hyrjl
Gabriele Petrioli 12 нояб. 2013, в 17:15

Показать ещё 1 комментарий

Теги:

html

css

css3

1 ответ

Ещё вопросы

У меня отлично работает: jsfiddle.net/fUEnk
Пример с изображениями также отлично работает jsfiddle.net/M8tbD/5
Руириз и Данко, ОП прав. Последнее изображение начинает исчезать до цвета фона, прежде чем 1-е изображение начинает исчезать .. см. Codepen.io/gpetrioli/pen/hyrjl

Gabriele Petrioli · Accepted Answer · 2013-11-12T15-40-00.000Z

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

Это происходит из-за того, что ваши изображения начинаются с 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

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