具有时间间隔的CSS动画

Question

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

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

这可以仅使用css完成吗？

这是我的JS BIN

Answer 1

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

演示

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