css动画

1. 创建动画步骤

2. 动画属性

3. 关键帧

1. 创建动画步骤

animation实现动画效果主要由两个部分组成：

• 通过关键帧来声明一个动画
• 在animation属性中调用关键帧声明的动画

2.动画属性

animation: [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-play-state> || <animation-fill-mode>]

• animation-name:指定一个关键帧动画的名字。
• animation-duration:设置播放动画所需时间。
• animation-timing-function: 设置播放动画方式，与transition-timing-function类似。

有ease、ease-in、ease-in-out、ease-out、linear和cubic-bezier等。

• animation-delay:指定动画开始时间。
• animation-iteration-count：动画播放的循环次数。

默认值为1，如果取infinite则无限次播放。

• animation-direction:制动动画的播放方向。
• animation-play-state:控制动画的播放状态。

有running和paused，running为默认值，类似于音乐播放器，可以通过paused暂停动画，通过running播放动画。

• animation-fill-mode：设置动画的时间外属性。

有none、forwards、backwards、both四个值，其中none为默认，在动画完成最后一帧反转回初始帧处，forwards为结束后继续应用最后关键帧位置，backwards为结束后迅速应用动画的初始帧，both兼具以上两个效果。

3. 关键帧

使用@keyframes声明动画

@keyframes wobble {
	0% {
		margin-left: 100px;
		background: green;
	}
	40% {
		margin-left: 150px;
		background: orange;
	}
	60% {
		margin-left: 75px;
		background: blue;
	}
	100% {
		margin-left: 100px;
		background: red;
	}
}

调用@keyframes声明的动画

.demo {
	margin-left: 100px;
	background: blue;
	animation: wobble .2s ease-in;
}