具有时间间隔的CSS动画 [英] CSS animation with time interval

查看:229
本文介绍了具有时间间隔的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动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆