动画样式

1. 触发式动画
   常用触发动作
   1：鼠标悬浮 （ ：hover）
   2：选项选中（ ：checked）
   3：输入框点击（ ：active）

2. 触发式过度
   时间参数 transition-duration
   延迟执行 transition-delay
   过度动画时间函数 transition-timing-function：linear 匀速
   ease 慢-快-慢
   ease-in 慢速开始
   ease-out 慢速结束
   ease-in-out 慢速开始和结束
   贝赛尔曲线参数
   过渡动画属性 transition-property：执行过渡属性；

   复合写法：
   transition: property duration timing-function delay

3. 主动式动画
   主动式动画：由用户自行创造关键帧，无需任何的动作触发
   创造方式为：
   @keyframes 动画名称 {
   0% {
   样式名称：样式值；
   }
   100% {
   样式名称：样式值；
   }
   }
   动画激活：给需要展示用户自行创造的主动式动画的元素加上animation-name（动画-名称）样式

   主动式动画名称：animation-name
   主动式动画事件：animation-duration
   主动式动画时间函数：animation-timing-function
   主动式动画时间延迟：animation-delay
   主动式动画播放次数：animation-iteration-count：默认是 1
    				 															 infinite 无限循环
    多次播放动画是的正反方向：
    animation-direction：normal  默认，每一次都是正向播放
           						 alternate 动画在奇数次正向播放，在偶数次反向播放
            						reverse 每一次都是反向播放
            						alternate-reverse 动画在奇数次反向播放，在偶数次正向播放
   动画播放完成之后的状态：
   animation-fill-mode：forwards    默认，保留最后一帧的状态
                                     backwards 第一帧的状态               		
   动画运行状态 ：
   animation-play-state： running  默认，一直播放
                                        paused  停止
   
   复合写法：
    animation: name duration timing-function delay iteration-count direction fill-mode;