具有时间间隔的CSS动画

我想无限地旋转一个图形元素,但是需要一些时间间隔.

例如,旋转90度(平滑动画)然后在5秒后再旋转90度并无限重复相同的旋转.

这可以仅使用css完成吗？

这是我的JS BIN

解决方法

很简单.以下代码将关键帧的转换限制为40％-60％(整个持续时间的五分之一).因此,如果我们为整个动画提供6秒,则1.2s将用于移动,4.8s将用于延迟.您可以使用它来获得更准确的数字.

Demo

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