animation-fill-mode: none | forwards | backwards | both; 检索或设置对象动画时间之外的状态。

这几天在手机微信分享页面时,有用到css3动画,现将其一些属性列举出来,方便以后学习查找。

动画的一些属性:

animation-name: none | <identifier> [ , none | <identifier> ]*;定义一个或多个动画名称。

animation-duration: <time>[,<time>]*; 指定对象动画的持续时间 。

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) [, linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) ]*; 指定对象动画的持续时间 。


animation-delay: <time>; 指定对象动画的持续时间 。

animation-iteration-count: <number>|infinite; 指定对象动画循环播放的次数。

animation-direction: normal | reverse | alternate | alternate-reverse [, normal | reverse | alternate | alternate-reverse ]*; 指定对象动画运动的方向。

animation-play-state: running | paused 检索或设置对象动画的状态。

animation-fill-mode: none | forwards | backwards | both; 检索或设置对象动画时间之外的状态。


过渡属性:

transform呈现的是一种变形结果,而Transation呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。http://www.w3.org/TR/css3-transitions/

transition可以和Transform同时使用。

transition是一个复合属性,可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值。

transition-property:   all  | none | <property>[ ,<property> ]*;设置要以动画方式变换的CSS属性。


transition-duration用来定义转换动画的时间长度,即从旧属性换到新属性花费的时间,单位为秒。

默认情况下动画过渡时间为0秒,所以当我们指定元素动画时会看不到过渡的过程直接看到结果。

      transition-duration: <time>[ ,<time>]*;设置动画的过渡时间。


transition-delay用来定义过渡动画的延迟时间。

时间可为正整数,负整数和0,非0的时候必须设置单位为s(秒)或ms(毫秒);

为负数的时候过渡的动作会从该时间点开始显示,之前的动作被截断;为正数的时候过渡的动作会延迟触发。

           transition-delay: <time>[ ,<time>]*;设置动画延迟执行的时间。

transition-timing-function用来定义过渡动画的效果。

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) ]* ;设置动画执行的方式(缓动效果)。

    

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值