Web前端之CSS动画

 

           

           animation-duration: 2s; 

　　　动画的执行时间 

 

            

           animation-delay:0.2s; 

　　    动画的延时 

 

           　　　　　　　　　　　　　　　　　　　　 

           　　　　　　　　　　      animation-timing-function:linear;

　　　　　　　　　　　　　　   动画的时序

 

linear	动画从头到尾的速度是相同的。	测试
ease	默认。动画以低速开始，然后加快，在结束前变慢。	测试
ease-in	动画以低速开始。	测试
ease-out	动画以低速结束。	测试
ease-in-out	动画以低速开始和结束。	测试
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

          animation-iteration-count:infinite；

          动画执行的次数

                可选值：

                    次数

                    infinite 无限执行

            

 

 

         animation-direction:alternate;

         指定动画运行的方向

                可选值

                    normal 默认值 每次从from到to运行

                    reverse 每次从to到from运行

                    alternate 重复执行动画时反向执行

                    alternate-reverse 从to向from运行 重复执行动画时反向执行

 

           

            animation-play-state:paused;  

　　设置动画的执行状态

                可选值：

                running 默认值 动画执行

                paused 动画暂停

            

            

            animation-fill-mode:backwards;

　　动画的填充模式

            可选值：

                none 默认值 动画执行完毕，元素回到原来的位置

                forwards 动画执行完毕元素会停止在结束的位置

                backwards 动画等待时，元素会处于开始的位置

                both 结合了forwards和backwards