Animatiom

by Vladimir

HTML

<img src="https://place-puppy.com/480x360" id="i1" width="480" height="360" />
<img src="https://place-puppy.com/480x361" id="i2" width="480" height="360" />
<img src="https://place-puppy.com/480x359" id="i3" width="480" height="360" />

CSS

img {
  position: absolute;
}

#i3 {
  animation: car infinite 5s;
}
#i2 {
  animation: car2 infinite 5s;
}
@keyframes car {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes car2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}