关于css3动画基础知识总结

大家看完下面的，就能操作自己想要的动画了！

A.  动画：所谓动画就是从一种元素的样式过渡到另一种元素的样式

a. @keyframes​规则用于创建动画，在这里定义动画发生的时间。用0%定义某元素起始的样式，100%定义此元素结束的样式，中间百分比越详细，动画过程越丰富。且0%与100%的样式是必须有的

​b.  而且被绑定动画的元素必须用animation设定动画名称与时长。如果不设定时长，默认是0，是不会启动动画的。

c.  其实animation是所有动画属性的简写，包括​：

        1. animation-name 设定@keyframe的名称因为@keyframe要绑定到选择器​

       2.animation-duration 完成动画所需要的时间 s/ms

       3.animation-timing-function  设定动画的速度曲线 

        （linear 从头到尾都是匀速的   ease 默认低速开始然后加速，在结束前变慢   ease-in 以低速开始  ease-out 以低速结束  ease-in-out 以低速开始和结束） 

4.animation-delay  设定动画开始之前的延迟

       （多少秒以后执行动画 允许赋值 -2s是动画马上开始 但跳2秒进入动画）

5.animation-iteration-count  设定动画播放的次数

      （设置n 数值   infinite定义无限次播放）​

6.animation-direction 是否需要轮流反向播放动画​

    （正常播放 norma   alternate动画轮流反向播放）​

​​d.    animation 语法  animation： 名字    动画所用时间    速度曲线类型  多少s之后开始动画  动画播放的次数     是否轮流反向播放