css3中的动画模块持续时长后面写两个时间是什么意思,代码如下

html-css010

css3中的动画模块持续时长后面写两个时间是什么意思,代码如下,第1张

animation-name规定需要绑定到选择器的 keyframe 名称。。

animation-duration规定完成动画所花费的时间,以秒或毫秒计。

animation-timing-function规定动画的速度曲线。

animation-delay规定在动画开始之前的延迟。

animation-iteration-count规定动画应该播放的次数。

animation-direction规定是否应该轮流反向播放动画。

1,animation-name:规定需要绑定到选择器的 keyfram 名称

2,animation-duration:规定完成动画所花费的时间,以秒或毫秒计,默认值0

3,animation-timing-funtion:速度变化曲线: 默认值ease

linear:匀速 ease-in:先慢变快ease-out: 先快后慢 ease-in-out : 慢-快-慢

4,animation-delay:规定动画开始的延迟,默认值是0

5,animation-iteration-count:动画重复次数infinite是正无穷

6,animation-direction: 设置动画方向: 默认值是 nomal

reverse:反方向alternate:奇数次-正方向偶数次-反方向 alternate-reverse:奇数次-反方向,偶数次-正方向

7,animation-fill-mode:backwards: 动画完成时,保持动画开始时的状态forwards: 动画完成时,保持动画结束时的状态

8,animation-play-state:

running:默认值,执行动画

可以。

如果过渡时间或过渡延迟时间不足1s,小数点前的0可以省略。以下两行代码等价。

transition: all 0.5s

transition: all .5s

资料来源:《HTML5布局之路》