css3之关键帧的解说

我们在之前的文中讲到过一个例子:
这里写图片描述
那么,这边也利用css触发了一个类似于aniamte的动作,就是用到了css3的动画效果transition,他的效果如下:
这里写图片描述
但是transition只能执行一次动画,如果我们想在这个动画基础上再新增一个别的动画,就需要再次定义一个事件,然后加上transition:all 1s linear,这样非常的麻烦,于是就出现了css3的关键帧动画: @keyframes
首先,我来写一个@keyframes的案例,之后我根据这个案例来详细的解说:
这里写图片描述
效果如下:
这里写图片描述
大家是否已经发现,通过@keyframes关键帧,我们可以不借助js,使用简单的几行代码来完成一系列的animate。那么代码具体含义是什么呢?
首先,我们来看@keyframes的格式:
这里写图片描述
@keyframes 定义后代表这段代码是一个关键帧。 changes就类似于一个函数名,这个关键帧的内容里面,20%,40%,60%,80%,100%代表的是当时间到达20%的时候,需要完成一个什么样的样式,20%后面就跟的是具体的样式。
这里写图片描述
这段代码就是定义这个@keyframes,animation:changes 10s linear 是执行这个关键帧,changes就是关键帧的函数名 10s代表时间,linear代表匀速。之前的文章中我们提到过关于匀速,加速,减速的一系列的属性值,这里就不多做解释了。
最后,我们需要在div 的class中加入这个animate ,才能够起到真正的执行效果。
在animation的样式中,也可以写成这种:
这里写图片描述
最后的3S代表的是当执行这个animation时,延迟3秒再执行。
animation所有的属性也可以单独设置:
animation-name:检索或设置对象所引用的动画名称
animtion-duration:检索或设置对象动画的持续时间
animation-timing-function:检索或设置对象动画的过渡类型
animation-delay:检索或设置对象动画延迟的时间
animation-iteration-count:检索或设置对象动画的循环次数
aimation-direction:检索或设置对象动画在循环中是否反向运动
我们可以把上面的change动画设置成以下形式:
这里写图片描述
那么同样也能达到效果,并且最后一行代码是让这个动画反复执行4次。注意,这里也可以循环无限次,属性值是infinite:
animation-iteration-count:infinite;

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值