Затухание одного изображения и затухание другого с помощью css анимации

Question

У меня есть два изображения, между которыми я хочу чередоваться. Мне бы хотелось, чтобы одно изображение полностью исчезло, а затем - второе изображение. Мне бы хотелось, чтобы два изображения циклически повторялись.

Answer 1

Вы можете довольно легко добиться этого, используя keyframes для вашего opacity и предоставив второму изображению animation-delay в два раза меньше времени, которое занимает анимация.

.fadein {
    position:absolute;
    top:0px;
}
.fadein img {
    opacity: 0;
    position:absolute;
    -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;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

#f2 {
    animation-delay: 3s;
}

<div class="fadein">
  <img src="https://dummyimage.com/600x400/000/fff" id="f1">
  <img src="https://dummyimage.com/600x400/abc/fff" id="f2">
</div>