Как создать эффект переворота?

#javascript #css

Написал эффект переворота на чистом CSS но никак не могу реализовать чтобы картинка
переворачивалась быстро несколько раз за секунду потом 5 секунду неизменно стоял.Потом
опять продолжалось.



img {
    background: #00f;
    width: 200px;
    height: 300px;
    animation: rotate 2s infinite;
    -webkit-animation: rotate 2s infinite;
}

@-webkit-keyframes rotate {
    100% {
        transform: rotateY(180deg);
    }
}
@keyframes rotate {
    100% {
        transform: rotateY(180deg);
    }
}




    

Ответы

Ответ 1

img {
    background: #00f;
    width: 200px;
    height: 300px;
    animation: rotate 6s infinite;
    -webkit-animation: rotate 6s infinite;
}


@keyframes rotate {
  0% { transform: rotateY(1080deg); }
  17% { transform: rotateY(0deg); }
}

@-webkit-keyframes rotate {
  0% { transform: rotateY(1080deg); }
  17% { transform: rotateY(0deg); }
} 





Наверное лучше поставить поворот на 720градусов 0% { transform: rotateY(720deg);
} В общем, на ваш вкус.


Ответ 2

Так?



img {
    background: #00f;
    width: 200px;
    height: 300px;
    animation: rotate 6s infinite;
    -webkit-animation: rotate 6s infinite;
}

@-webkit-keyframes rotate {
      5% { transform: rotateY(180deg); }
     10% { transform: rotateY(0deg); }
     15% { transform: rotateY(180deg); }
     20% { transform: rotateY(0deg); }
}
@keyframes rotate {
      5% { transform: rotateY(180deg); }
     10% { transform: rotateY(0deg); }
     15% { transform: rotateY(180deg); }
     20% { transform: rotateY(0deg); }
}



Ответ 3

img {
  width: 200px;
  height: 360px;
  animation: flip 6s infinite;
  -webkit-animation: flip 6s infinite;
}

@keyframes flip {
  0% { transform: rotateY(0); }
  16% { transform: rotateY(1080deg); }
  100% { transform: rotateY(1080deg); }
}