css 动画效果

1.设置关键帧

    ⽅法⼀： @keyframes 关键帧名称{

                              from{初始状态属性}

                              to{结束状态属性}

                                               }

     ⽅法⼆： @keyframes 关键帧名称{

                             0%{初始状态属性}

                             50%（中间还可以再添加关键帧）

                              100%{结束状态属性}

                                          }

  

注意：

1、帧的顺序可以更改，不关顺序问题。如果初始帧不写，默认是原始设置，如果结束帧不写， 默认也是原始设置

2、可以同时设置关键帧，⽤逗号（,）隔开就⾏

2.调用关键帧

   动画属性：

       1.animation-name    绑定到选择器的关键帧 的名称，告诉系统需要 执⾏哪个动画(必填)

            属性值：

              设置动画的名字，和 @keyframs相对应，可 以设置多个动画， 逗号隔开，应⽤多个动画

       2.animation-duration    动画的完成时间，告诉系统动画持续的时长 （必填）

              时间单位：s ， ms

       3.animation-timing-function   设置动画如何完成一个 周期，告诉系统动画执 行的速度（与                                                             过度动画 类型）

                属性值： 

                         *ease  默认值，慢 速开始，先加速，然后 再减速

                         *linear 匀速运动

                          ease-in 先慢后快 加 速运动

                          ease-out 先快后慢 减 速运动

                          ease-in-out 以慢速开 始和结束的过渡效果

                          *steps()分布执⾏过渡 效果

                          cubic-bezier(n,n,n,n) ⽴⽅⻉塞尔曲线 函数， 值是0-1之间的数值

      4.animation-delay   动画在启动前的延迟间 隔   默认0s

      5.animation-iteration-count    动画的播放次数，告诉 系统动画需要执行几次

                 属性值：

                        n  定义动画播放n 次

                       infinite   无限次往返执 行

     6.animation-direction    指定是否应给轮流反向 播放动画

                  属性值：

                       normal (默认值)： 从from 向to运⾏，每次都是这样

                       reverse   从to到from运 ⾏，每次都是这样

                      * alternate   从from向to运 ⾏，重复执⾏动画时反向执 ⾏

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

    7. animation-fill-mode   规定当动画不播放时( 完成时,延时未开始 播放时)应用到的元 素样式

               属性值：

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

                   * forwards  动画执⾏完 毕，会停⽌在动画结束的位 置

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

                   both  结合了forwards和 backwards的特点

    8. animation-play-state      告诉系统当前动画是否 需要暂停

             属性值： 

                    running  默认值 动画执 ⾏

                   paused  动画暂停

    9. animation    简写，可以写以上任意 属性的可选值

              

              animation: 关键帧的名 称 动画持续的时间 运 动状态 (linear( 匀速 )) 动 画延迟的时间 动画                                   的循 环次数 动画的运动⽅式 ( 设置正向或者反向 )