css样式----动画（animation）

动画和过渡类似，都是可以实现一些动态的效果

不同的是过渡需要在某个属性发生变化时触发

而动画可以自动的触发

想要设置动画效果，必须先设置一个关键帧（视频每一秒由许多图片组成 每一张就是一帧 没有发生变化的帧就是普通帧 发生变化和变化结束的那一帧就叫关键帧）

关键帧设置了动画执行等等每一个步骤

创建关键帧要使用以下方式：

@keyframes text{

            /* from 表示动画的开始位置,可以使用 0% */

            from{

            }

            /* to 表示动画的结束位置,可以使用 100% */

            to{ 

            }

 

animation-name: 要对当前元素生效的关键帧的名字，即 @keyframes 后的名字

      animation-duration: 动画的执行时间

      animation-delay: 动画执行的延时

      animation-timing-function: 与transition-timing-function使用方式相同

      animation-iteration-count: 动画执行的次数

            值为 infinite 时，动画无限次的执行 

      animation-direction: 动画执行的方向

            可选值：

                  normal 从 from 到 to ，每次重复都是如此 默认值 

                  reverse 从to 到 from ，每次都是如此

                  alternate 从 from 到 to 但重复的时候会反向执行，相当于来回执行

                  alternate-reverse 从 to 到 from ，重复时反向执行

      animation-play-state: 动画执行的状态

            可选值

                  running 动画执行 默认值

                  paused 动画暂停

      animation-fill-mode: 动画的填充模式

            可选值

                  none 动画执行完毕，元素回到初始位置

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

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

                        （这里可以给动画设置一个延时，同时设置背景颜色的变化，就可明显看出效果）

                  both 结合 forwards 和 backwards

      animation: 动画的简写属性，与 transition 用法相同