动画

动画的基本使用

定义关键帧

1. 简单定义

   1
   @keyframes 动画名{
   2
   from{
   3
       属性:值
   4
   }
   5
   to{
   6
       属性:值
   7
   }
   8
   }

2. 完整定义

1
@keyframes 动画名{
2
    0%{
3
        属性:值
4
    }
5
    60%{
6
        属性:值
7
    }
8
    100%{
9
        属性:值
10
    }
11
}

给元素应用动画

1. ​animation-name:​给元素设置具体的动画(具体的关键帧)
2. ​animation-duration​:设置动画所需时间
3. ​animation-delay​:设置动画延迟

其他属性

动画类型

​animation-timing-function​

1. ​ease​:平滑过渡 —默认值
2. ​linear​:线性过渡
3. ​ease-in:慢 -> 快
4. ​ease-out​:快 -> 慢
5. ​ease-in-out​:慢 -> 快 ->慢
6. ​step-start​:等同于steps(1,start)
7. ​step-end​:等同于steps(1,end)
8. ​steps(integer,?)​:接收两个参数的步进函数,第一个参数必须为正整数,指定的步伐.第二个参数可选值是start或end,指定每一步发值发生变化的时间点.第二个参数默认值为end.
9. ​cubic-bezie(number,number,number,number)​:特定的贝塞尔曲线类型

动画的播放次数

​animation-iteration-count​
​number​:动画循环次数
​infinite​:无限循环

动画未播放的状态

​animation-fill-mode​
​forwards​:设置对象状态未动画结束时的状态
​backwards​:设置对象状态未动画开始时的状态

动画的播放状态

​animation-play-state​
​running​:运动(默认)
​paused​:暂停

复合属性

只设置一个时间表示duration​,两个时间分别是:duration​和delay​,其他属性没有数量和顺序要求
​animation-play-state​一般单独使用