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

Posted 2023-03-06

【中文标题】CSS3 从 0 旋转到 90，然后从 90 旋转到 180

【英文标题】：CSS3 Rotate from 0 to 90 then 90 to 180

【发布时间】：2013-08-19 00:21:27

【问题描述】：

我有一个使用 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 for the project

【问题讨论】：

您是否希望它在每旋转 90 度后停止一段时间

不一定，特别是如果我有缓入出局

@CodyGuldner 上面的评论 :)

这是我尝试使用的另一个 jsfiddle：jsfiddle.net/julien/rukC6

@stackErr 差不多了，我想旋转 360 度，每 90 度暂停一次，无限旋转。

【参考方案1】：

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

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;

【讨论】：

感谢您的帮助，我想我只是想让您知道我用它制作了这个加载屏幕。 Here's the link to Vine

【参考方案2】：

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

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

如果你想在增量处停止动画，那就有点困难了：

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

【讨论】：

差不多，我想把它旋转360度，每90度暂停一次，无限旋转。