带时间间隔的CSS动画

我想无限旋转一个图形元素，但要一步一步地以一定的时间间隔旋转

例如，旋转90度（平滑动画），然后在5秒后再旋转90度并无限重复相同的操作

这可以只用css来完成吗

---

这是我的

你可以试试这样的东西

@-webkit-keyframes rotation {
    0%,10%     {-webkit-transform: rotate(0deg);}
    90%,100%   {-webkit-transform: rotate(90deg);}
}

---

虽然它不允许精确计时，但它可以大致按照您的要求执行。

对于常规旋转，您可以使用

@-webkit-keyframes rotation {
    0% {-webkit-transform: rotate(0deg);}
    12.5%, 25% {-webkit-transform: rotate(90deg);} 
    37.5%, 50% {-webkit-transform: rotate(180deg);} 
    62.5%, 75% {-webkit-transform: rotate(270deg);} 
    87.5%, 100% {-webkit-transform: rotate(360deg);}
}

---

很简单。以下代码将变换限制为关键帧

40%-60%

（整个持续时间的五分之一）。因此，如果我们给整个动画

6秒

，则

1.2s

将用于移动，

4.8s

将用于延迟。你可以用它来得到更准确的数字

---

虽然它在我的JS BIN示例中运行良好，但当应用到我的实际工作中时，它显示出一些奇怪的行为。在第二和第四个旋转中没有动画运动。知道吗？这是我用的真实图像。请看一下这个让我们看看

@-webkit-keyframes rotation {
    0%, 40%   {-webkit-transform: rotate(0deg);}
    60%, 100% {-webkit-transform: rotate(90deg);}
}
@keyframes rotation {
    0%, 40% { transform: rotate(0deg); }
    60%, 100% { transform: rotate(90deg); }
}
.wrapper a:last-child div {
  -webkit-animation: rotation 6s infinite linear;
  animation: rotation 6s infinite linear;
}