css3怎么让动画匀速变换 linear

html-css010

css3怎么让动画匀速变换 linear,第1张

transition-timing-function。和transition动画一样,animation动画也是CSS3动画的一种,这类动画可以理解为是一种关键帧动画,它可以预先为动画设置多个节点,在每个节点中含有不同的状态属性,通过使用animation动画我们可以得到更为复杂的动画效果。

注意:transition是为页面元素设置某个需要产生动画效果的属性,如宽度(width)、高度(height)、透明度(opacity),甚至3D旋转等,并使得这些属性的值在发生变化时产生相应的过渡效果。我们常常在制作类似按钮鼠标经过和移出效果时使用transition。

通俗地说,transition是简化版的CSS3动画,而animation则是强化版的CSS3动画。在日常开发中transition的使用频率更高一些,我们往往只有在遇到transition无法解决的问题时,才会转而使用animation。

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:默认值,执行动画