css3之动画

定义：它是css3中的具有颠覆性的特征之一，它可以通过设置多个节点来精准控制一个或者一组动画，它可以协助制作者实现复杂的动画效果。它比较于过渡来说可以实现更多变化，更多控制，连续自动播放等效果。

那么如何制作动画呢：

1.先要定义动画

2.再使用动画

（相当于一个变量，要定义才能更方便多去使用。）

注意：要使用动画，需要高版本的浏览器。

1，使用动画前，用@keyframes定义动画，定义好后，通过animation属性来指定动画名称。

定义动画是，需要告诉它这个动画如何完成

（1）：开始状态：from

（2）：结束状态：to

例如：

<style>

.box{

position：absolute

left/right:

top/bottom:

}(这是定义好的方形，当然也可以对body中的进行编辑，运用选择器就可以了）

.box;hover{animation:move 2s

}

@keyframes move{

from{left:0px;

top:0px         }

to{left: 100px

bottom:100px       }

</style>

除了用from，to，还可以用百分数来表示。即from类似百分之零，才开始；to类似百分之一百，已经结束。但百分数的好处是它可以定义的更多一些，也就是中间的元素变化也可以进行编辑。

但注意：要想元素具有动画效果，除了定义好动画和运用外，还需要给这个元素进行绝对定位。

其中animation是动画属性的简写。他后面必须接name（元素的名称），duration（动画完成一个周期所需的时间）；还可以接timing-function（动画的速度曲线，默认为ease），delay（动画何时开始，默认为0），iteration-count（动画播放的次数，默认是1，还有infinite），fill-moode（动画状态，通常有两个值进行指定：保持结束时候的状态（forwards），回到开始时的状态backwards），play-state（规定动画是否在运行还是暂停，但他必须单独使用，即另成一行。其中running表示运行，是默认值；paused表示暂停状态）等一些常用属性。

另外：opacity是指透明度，当为1的时候，就是透明了。

将这些与css3中其他特征结合起来，会有更好的效果。