CSS3动画属性有哪些！

动画animation

　　可以让元素一直运动的属性，不需要事件进行触发，调用关键帧即可！！

animation:  复合属性

 

        animation-name   　　　　　　关键帧的名称。

        animation-duration   　　　　动画的持续的时间。

        animation-timing-function   动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线）。

        animation-delay  　　　　　　动画的延迟。

        animation-iteration-count   动画运动的次数（默认情况下运动1次） infinite(无限循环)。

        animation-direction 　　　　 运动的方向。

            direction属性值：

                - reverse：　　　　　　反方向运行 （ 让关键帧从后往前执行 ）

                - alternate：　　　　　动画先正常运行再反方向运行，并持续交替运行

                - alternate-reverse： 动画先反运行再正方向运行，并持续交替运行

        animation-play-state 

               play-state属性值：

                    　　　　paused 暂停

                    　　　　running 运动

 

　　　　animation-timing-function:

        　　　　动画的类型：

           　　　　 linear　　　　个人最喜欢的

         　　 　　  ease　　　　　

            　　　　ease-in

           　　　　 step-start  //没有动画中间的过渡效果。每次直接跳到下一帧开始的地方 可以做出GIF的效果

            　　　　......

制定关键帧：

        @keyframes 关键帧的名称{

            /*from{}

            to{}*/ 适合动画少的

            0%{

                //开始状态

            }

            25%{

 

            }

            50%{

 

            }

            ......

            100%{

                //结束状态 最常用的

            }

        }

动画里的属性有很多，所以有简写的方式。

 

常用的写法：

        animation:关键帧的名称  动画运动的时间  linear(匀速)  动画延迟的时间 动画运动的次数

 

加在需要做动画的元素上，调用关键帧即可，别忘了做关键帧也同样重要，写的好的关键帧可以做出很酷炫的运动噢！