css的animation动画和@keyframes动画轨迹

比较复杂的动画可以使用animation属性

animation:剧本名 动画时间 延迟时间 运动曲线 动画次数 是否保持动画最终效果 是否还原也有动画 播放状态

	参数1：剧本名
	参数2：动画时间
	参数3：延迟时间
	参数4：运动曲线 linear匀速  steps() 分步骤
	参数5：动画次数，写几就代表几次，写infinite 代表无限次     
	参数6：是否保持动画最终的状态 forwards 就代表保持，不加就代表不保持
    参数7：是否要复原时也用动画效果，加一个alternate代表用动画效果，不加代表复原没有动画
    参数8：是暂停还是播放，默认为播放(running) 也可以改为paused（暂停）
          如果你给了暂停，永远都不会开始，除非你把状态改为running
          
 注意: 参数没有顺序之分,但是先写的时间是动画时间，后写的时间是延迟时间

@keyframes动画轨迹

先要写一个动画剧本（告诉元素要怎么动，相当于告诉元素要用动画效果动成什么样子）

```css
 @keyframes 剧本名{
            from{ 这里一般为空 }
            to{
                写你希望元素最终变成什么样子的代码
            }
        }

​ 也可以用百分比来设置阶段动画

 @keyframes 剧本名{
            /* 从0代表40%，动画总时长的前百分之40，前百分之40，做位移
                如果总时长4s，相当于前1.6秒做位移 */
            40%{
                transform: translateX(800px);
            }
            /* 从40% - 60% 这段时间，做旋转  */
            60%{
                /* 在已经平移的基础上再旋转 */
                transform: translateX(800px) rotate(45deg);
            }
            /* 还有剩下的如果没写任何，就代表用剩下的时间去复原 */
        }