具有时间间隔的CSS动画

问题描述

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

I want to rotate a graphic element infinitely but with some time interval by step.

例如，旋转90度(平滑动画)，然后在5秒钟后再旋转90度并无限重复该操作.

For example, rotate 90 degree (smooth animation) then after 5 secs rotate another 90 degree and repeat the same infinitely.

可以仅使用CSS完成此操作吗?

Can this be done using only css?

这是我的 JS BIN

推荐答案

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

Pretty simple. The following code limits the transformation to keyframes 40%-60% (one fifth of the entire duration). So, if we give 6 seconds to the entire animation, 1.2s will be used for movement and 4.8s will be used for delay. You can play with it to get more accurate numbers.

演示

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

这篇关于具有时间间隔的CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！