html动画

使用animation添加动画效果

一、实现步骤：

1、定义动画

/*1、 定义动画的两个状态的变化 */
@keyframes  动画名词{
     from{}
     to{}
 }
 /* 2.定义动画的多个状态，通过百分比定义 */
 @keyframes  动画名词{
     0%{}
     15%{}
     79%{}
     100%{}
 }

2、使用动画

animation:动画名称 动画花费时间

二、动画的复合属性

animation:动画名词 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态

1、动画名字参考css类选择器命名

2、linear(补间动画）  steps（逐帧动画0

3、动画时长和延迟时间别忘了带单位s

4、infinate无限循环动画（重复次数）

5、alternate 为反向 就是左右来回执行动画（跑马灯）

6、forwards 动画结束停留在最后一帧状态/backweards默认第一帧状态，不循环状态使用