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

I have an object rotating 360 degrees using CSS3's rotate animation. However, the code (linked below) rotates the image 360 degrees then repeats the same animation.

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

I want to rotate it 360 degrees, pause every 90 degress and have infinite rotating.

我想把它旋转360度，每90度暂停一次然后无限旋转。

Any help would be much appreciated.

如有任何帮助，我们将不胜感激。

Thanks

谢谢

.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); } }

Here is a JSFiddle for the project

这是项目的JSFiddle

2 个解决方案

#1

You need to add additional points in your keyframe:

您需要在关键帧中添加额外的点:

Fiddle

小提琴

@-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;
}

#2

If you just want it to stop after it rotates just remove the infinite modifier:

如果你只是想让它在旋转后停止，只需删除无限修饰符:

http://jsfiddle.net/Ugc5g/30/

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

If you want to stop the animation at the increments it is a little harder:

如果你想要停止增加动画，那就有点困难了:

http://jsfiddle.net/Ugc5g/31/

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s ease-in-out infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform:rotate(0deg); }
    25% { -webkit-transform: rotate(90deg); transform:rotate(90deg); }
    25.5% { -webkit-transform: rotate(90deg); transform:rotate(90deg); }
    50% { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
    50.5% { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
    75% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
    75.5% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform:rotate(0deg); }
    25% { -webkit-transform: rotate(90deg); transform:rotate(90deg); }
    25.5% { -webkit-transform: rotate(90deg); transform:rotate(90deg); }
    50% { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
    50.5% { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
    75% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
    75.5% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
@keyframes spin { 
    0% { -webkit-transform: rotate(0deg); transform:rotate(0deg); }
    25% { -webkit-transform: rotate(90deg); transform:rotate(90deg); }
    25.5% { -webkit-transform: rotate(90deg); transform:rotate(90deg); }
    50% { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
    50.5% { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
    75% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
    75.5% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}

#1