动画#

使用animation添加动画效果,实现多个状态间的变化过程,动画过程可控（重复播放、最终动画、是否暂停）

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面

构成动画的最小单元：帧或动画帧

定义动画#

• 两种状态间的变化：

  1@keyframes 动画名称 {
  2	from {}
  3	to {}
  4}

• 多个状态之间的变化：

  1@keyframes 动画名称 {
  2	0% {}
  3	10% {}
  4	15% {}
  5	100% {}
  6}
  7
  8注意：百分比指的是动画总时长的占比
  90%～100%称为动画序列

使用动画#

1animation: 动画名称 动画花费时长;

• 使用动画相关属性控制动画执行过程

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

  属性	作用	取值
  animation-name	动画名称
  animation-duraton	动画时长
  animation-timing-function	设置动画的过渡类型	linear线性过渡 ease 由慢到快再到慢【默认】 ease-in由慢到快 ease-out由快到慢 ease-in-out由慢到快(匀速)再到慢 steps(数字) 逐帧动画
  animation-delay	设置动画延迟的时间	默认是0
  animation-iteration-count	设置动画的循环次数	infinite 无限循环,默认值为1
  animation-direction	动画在循环中是否反向运动	normal正常方向 reverse反方向运行 alternate 先正常运行再反向运行,并持续交替 alternate-reverse先反向运行再正向运行,并持续交替运行
  animation-fill-mode	规定动画执行完毕时状态	none默认值 forwards 结束状态 backwards 开始状态 both结束或开始的状态
  animation-play-state	暂停动画,规定动画是否正在运行或暂停	paused 暂停,通常配合:hover使用,默认是running

  • 注意：
    • 动画名称和动画时长必须赋值
    • 取值不分先后顺序
    • 如果有2个时间值,第一个时间表示动画时长,第二个时间表示延迟时间
  • 逐帧动画配合精灵图使用,其他都是补间动画

1@keyframes move {
2	0% {
3		transform: translateX(0px);
4	}
5
6	100% {
7		transform: translateX(1000px);
8	}
9}
10
11div {
12	width: 100px;
13	height: 50px;
14	background-color: pink;
15	animation: move 5s;
16}
17
18<div></div>

多组动画#

1animation: 动画1,动画2,动画N;