对css3动画事件的监听

关于对css3动画事件是否结束的监听:



css3的动画主要有两种方式:

1、-webkit-animation动画其实有三个事件: 

开始事件 webkitAnimationStart 
结束事件 webkitAnimationEnd 
重复运动事件 webkitAnimationIteration

2、css3的过渡属性transition,在动画结束时,也存在结束的事件:
webkitTransitionEnd;

但是此只有一个事件


1、css3的transition

其主要有三个属性:
(1)t ransition-property      表示要运动的样式
其主要有: :all(所有属性改变) || [attr] (指定要运动的样式)|| none(没有属性改变) 几个取值
(2)transition-duration  表示执行动画需要的时间,单位为毫秒(s)
(3)transition-delay  表示延迟的时间 ,单位为毫秒(s),默认为0,表示没有延迟
(4) transition-timing-function  表示运动的形式
其中主要形式有:ease(逐渐变慢) | linear(匀速) | ease-in(加速) | ease-out(减速) | ease-in-out(先加速然后减 速) | cubic-bezier(该值允许你去自定义一个时间曲线)(number, number, number, number>)

综合在一起的写法是:
元素选择器{transition:运动的样式 持续时间 运动形式 延迟时间;}  

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值