动画

动画

animation添加动画效果

多个状态之间的变化过程，动画过程可控(重复播放，最终画面，是否暂停)

动画实现步骤

1：定义动画
 /* 1:定义动画 
        @keyframes 动画名称{
            from {}
            to {}
        }
        */
        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
​
2：使用动画
​
/* 2 使用动画 */
            /* animation: 动画名称 动画花费时长; */
            animation: change 2s;

动画属性

animation：动画名称  动画时长  速度曲线  延迟时间  重复次数 动画方向 执行完毕时状态；
​
动画名称  动画时长 必须赋值
赋值不分前后顺序
如果有2个时间值，第一个时间表示动画时长，第二个表示动画延迟时间