HTML5、CSS3进阶——动画、空间转换、弹性盒子

动画：

目的：使用animation添加动画效果

过渡只能实现两个状态之间的变化过程

动画效果：实现多个状态的变化过程，动画可控（重复播放、最终画面、是否暂停）

定义动画：

两个状态的动画变化：

@keyframes 动画名称{

from{}

to{}

}

多个动画的实现

%表示的是动画总时长的占比

@keyframes 动画名称{

0%{}

10%{}

15%{}

100%{}

}

里面写css属性

使用动画：animation：动画名称 动画花费时长。

animation：动画名称 动画时长 速度曲线 延迟效果 重复次数 动画方向 执行完毕时的状态

注意：动画名称和动画时长必须赋值

取值不分先后顺序

如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

            /* animation: change 1s linear; */