CSS3从0旋转到90然后旋转90到180

Question

我有一个使用CSS3旋转动画旋转360度的物体.但是,代码(下面链接)将图像旋转360度然后重复相同的动画.

我想将它旋转360度,每90度暂停一次,并且无限旋转.

任何帮助将非常感激.

谢谢

.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 1s ease-in-out infinite;
-moz-animation:spin 1s linear infinite;
animation:spin 1s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

这是项目的JSFiddle

Answer 1

您需要在关键帧中添加其他点:

小提琴

@-webkit-keyframes rotate {
  0% { -webkit-transform: rotate(0deg); }
  20% { -webkit-transform: rotate(90deg); }
  25% { -webkit-transform: rotate(90deg); }
  45% { -webkit-transform: rotate(180deg); }
  50% { -webkit-transform: rotate(180deg); }
  70% { -webkit-transform: rotate(270deg); }
  75% { -webkit-transform: rotate(270deg); }
  100% { -webkit-transform: rotate(360deg); }
}

.animation-rotate {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 4.5s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-transition-timing-function: linear;
}