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">-->
</div>

CSS

@keyframes animation2 {
    0% {opacity:1;}
    10% {transform:rotateY(-180deg);opacity:1;}
    30% {transform:rotateY(0deg);opacity:1;}
    49% {transform:rotateY(0deg);opacity:1;}
    50% {transform:rotateY(-180deg);opacity:0;}
    100% {transform:rotateY(0deg);opacity:1;}
    
}
div {
  width:63px;
  height:67px;
  position:relative;
}
div img{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
}
div img:nth-child(1){
  animation-name: animation2;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  /*animation-direction: alternate;*/
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  z-index:3;
}