CSS CSS3 从 0 到 90 然后从 90 到 180 旋转
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18275937/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Rotate from 0 to 90 then 90 to 180
提问by David Ingledow
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
回答by dc5
You need to add additional points in your keyframe:
您需要在关键帧中添加其他点：
@-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;
}
回答by Matthew R.
If you just want it to stop after it rotates just remove the infinite modifier:
如果你只是想让它在旋转后停止，只需删除无限修改器：
.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:
如果你想以增量停止动画，那就有点难了：
.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); }
}
