动画 animate

• 本质是快速切换大量图片是在人脑中形成的具有连续性的画面，构成动画的最小单元：帧或者动画帧。

• 参考文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations)

定义动画

• 方式 1

@keyframes animate_name {
	from {
	}
	to {
	}
}

• 方式 2

@keyframes animate_name {
	0% {
	}
	25% {
	}
	50% {
	}
	75% {
	}
}

使用动画

• animation : 动画名称 动画时间 速度曲线 延迟时间 播放次数 动画方向 执行完毕时状态

.box {
	animation: animate_name 1s;
}

动画-动画名称

.box {
	animation_name: name;
}

动画-动画时间

.box {
	animation-duration: name;
}

动画-速度曲线

.box {
	animation-timing-function: linear;
}

参数说明

• linear 动画从头到尾的速度是相同的。
• ease 默认。动画以低速开始，然后加快，在结束前变慢。
• steps 指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。

动画-延迟时间

.box {
	animation-delay: 10s;
}

动画-播放次数

.box {
	animation-iteration-count: 3;
}

动画-动画方向

.box {
	animation-direction: normal;
}

动画-执行完毕时状态

.box {
	animation-fill-mode: forwards;
}