Блог

Я хотел бы анимировать 2 изображения с помощью css, при этом 1 запускается и остается на 5 секунд, а другой следует, и они оба остаются еще на 5 секунд вместе, и все это начинается снова в бесконечном цикле. Я делаю это один раз, но как только он проходит через первый цикл, все они анимируются одновременно без второй задержки изображений. Пожалуйста, просмотрите мой код ниже:

CSS:

 img.coke {
position: relative;

animation-name: FadeInOut;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

img.fanta {
position: relative;
opacity:0;
animation-name: FadeIn;
animation-duration: 5s;
animation-delay: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes FadeInOut {
0% {
 opacity:0;
}

50% {
opacity:1;
}

100% {
 opacity:1;
}
}

@keyframes FadeIn {
 0% {
 opacity:0;
 }

 100% {
  opacity:1;
 }
 }
  

HTML:

 <div id ="imgo">
<img class = "coke"  src="http://media.wktv.com/images/AP_985452110986.png"   />
<img class ="fanta"  src="http://www.coca-colaproductfacts.com/content/dam/productfacts/us/productDetails/ProductImages/Fanta_12.png" />
</div>
  

Как вы заметили, animation-delay работает только для задержки времени запуска анимации:

Указывает, когда должна начаться анимация. Это позволяет последовательности анимации начинаться через некоторое время после ее применения к элементу.

Но вы можете использовать логику, которая у вас уже есть, контролируя состояние непрозрачности на основе % анимации:

 img {
  max-height: 200px;
}
img.coke {
  position: relative;
  animation: FadeInOut 2s infinite alternate ease-in-out;
}
img.fanta {
  position: relative;
  opacity: 0;
  animation: FadeIn 2s infinite alternate ease-in-out;
}
@keyframes FadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes FadeIn {
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}  

 <div id="imgo">
  <img class="coke" src="http://media.wktv.com/images/AP_985452110986.png" />
  <img class="fanta" src="http://www.coca-colaproductfacts.com/content/dam/productfacts/us/productDetails/ProductImages/Fanta_12.png" />
</div>  

 .coke {
    height: 100px;
    opacity: 0;
    -webkit-animation: example1 10s infinite; /* Safari 4  */
    -moz-animation:    example1 10s infinite; /* Fx 5  */
    -o-animation:      example1 10s infinite; /* Opera 12  */
    animation:         example1 10s infinite; /* IE 10 , Fx 29  */
}

.fanta {
    height: 100px;
    opacity: 0;
    -webkit-animation: example2 10s infinite; /* Safari 4  */
    -moz-animation:    example2 10s infinite; /* Fx 5  */
    -o-animation:      example2 10s infinite; /* Opera 12  */
    animation:         example2 10s infinite; /* IE 10 , Fx 29  */
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes example1 {
    10%  {opacity: 0;}
    15%  {opacity: 1;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes example1 {
    10%  {opacity: 0;}
    15%  {opacity: 1;}
    100% {opacity: 1;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example2 {
    45%  {opacity: 0;}
    50%  {opacity: 1;}
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes example2 {
    45%  {opacity: 0;}
    50%  {opacity: 1;}
    100% {opacity: 1;}
}
  

Попробуйте манипулировать процентами анимации

Пример: https://jsfiddle.net/o4226gmd