CSS3从0旋转到90,然后从90旋转到180
我有一个使用CSS3的旋转动画360度旋转的对象。但是,代码(链接如下)将图像旋转360度,然后重复相同的动画 我想把它旋转360度,每90度暂停一次,然后无限旋转 任何帮助都将不胜感激 谢谢CSS3从0旋转到90,然后从90旋转到180,css,animation,Css,Animation,我有一个使用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; -m
.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); } }
这里有一个如果您只想在它旋转后停止,只需删除无限修改器: 如果要以增量停止动画,则会稍微困难一些:
您需要在关键帧中添加其他点:
你想让它在每次90度旋转后停止一段时间吗?不一定,特别是如果我有放松的时候-out@CodyGuldner上面的评论:)这是我尝试使用的另一个JSFIDLE:@stackErr差不多,我想把它旋转360度,每90度暂停一次,无限旋转一次。差不多,我想把它旋转360度,每90度和无限旋转暂停一次。谢谢你的帮助,我想我会让你知道我用它制作了这个加载屏幕。
.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); }
}
.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); }
}
@-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;
}