关于CSS3中动画属性的基本知识

关于CSS3中动画属性的基本知识

animation顾名思义为动画的意思。Animation应用在页面DOM上 使其产生动画的效果。在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Key s",我们把他叫做“关键帧”，玩过flash的朋友可能对这个东西并不会陌生。

animation vs transition

相同点：都是随着时间改变元素的属性值。

不同点：transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性； 初始效果——最终的效果之间的变化；

而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值；初始效果———动画帧———动画帧————最终的效果

animation 复合式写法；animation{move 5s liner -2s infinite reverse}

注：过度时间和延迟时间顺序不能互换，前面是过度时间，后面的是延迟时间。

1、animation-name (必要的)

是用来定义一个动画的名称，为@keyframes中的名称，否则不会有动画效果。none为默认值，当值为none时，将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样，我们可以同时附几个animation给一个元素，我们只需要用逗号“，”隔开。

必须与规则@keyframes配合使用，

定