css3过渡(transition)和动画(animation)变换(transform )

html-css05

css3过渡(transition)和动画(animation)变换(transform ),第1张

| 值 | 描述 |

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

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

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

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

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

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

animation-fill-mode : none | forwards | backwards | both

/*none:不改变默认行为。

forwards :当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。

both:向前和向后填充模式都被应用。 */

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform-origin: bottom right/* 设置旋转点,默认是中心点 */

参考

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

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

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