JSFiddle - React, Tailwind, and code Playground

by kirito0709

HTML

Вращающийся текст<br><br><br><br><br>

<div>
<img src="https://seasonkrasoty.ru/_/images/sale_hit_new.png">
<img src="https://seasonkrasoty.ru/_/images/sale_hit_new2.png">
<img src="https://seasonkrasoty.ru/_/images/sale_hit_new3.png">
</div>

CSS

@keyframes animation1 {
    0% {transform:rotateY(-90deg);opacity:0; background:black;}
    10% {transform:rotateY(0deg);opacity:1; background:blue;}
    20% {transform:none;opacity:1; background:green;}
    30% {transform:none;opacity:1; background:black;}
    50% {transform:none;opacity:1; background:black;}
    60% {transform:rotateY(-90deg);opacity:0; background:red;}
    100% {transform:none;opacity:0; background:black;}
}

div {
  width:63px;
  height:67px;
  position:relative;
}
div img{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
}
div img:nth-child(1){
  transform:rotateY(-90deg);opacity:0;
  animation-name: animation1;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  /*animation-direction: alternate;*/
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  z-index:3;
}
div img:nth-child(2){
  transform:rotateY(-90deg);opacity:0;
  animation-name: animation1;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  /*animation-direction: alternate;*/
  animation-timing-function: linear;
  animation-delay: 5.75s;
  animation-fill-mode: forwards;
  z-index:3;
}
div img:nth-child(3){
  transform:rotateY(-90deg);opacity:0;
  animation-name: animation1;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  /*animation-direction: alternate;*/
  animation-timing-function: linear;
  animation-delay: 11s;
  animation-fill-mode: forwards;
  z-index:3;
}