animation 动画属性详解

animation 动画属性详解

属性	值
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线（也可以是贝塞尔曲线）。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。
animation-fill-mode	规定动画在执行时间之外应用的值。
animation-play-state	规定动画是正在运行还是暂停。

animation: 动画名称 动画运行时长 延迟执行的时间 运动轨迹 循环次数 运动方向 运行状态

1. 运动轨迹 steps 步进

• 条件假设 : 有一张精灵图 大小为 2400px , 里面分别包含有12只兔子的帧图片

• 要求做到的效果 ：让兔子跑起来
• html

<div class="rabbit">
	<div class="rabbit-content"></div>
</div>

• css

.rabbit {
	width: calc(2400px / 12);
	// 高度自行设置
	position: relative;
	overflow: hidden;
}
.rabbit-content {
	width: calc(2400px / 12);
	// 高度自行设置
	background: url('2400px的兔子精灵图') no-repeat;
	animation: run 1s steps(12) infinite;
}

@keyframes run {
	0% {
		background-position-x: 0;
	}
	100% {
		background-position-x: -2400px;
	}
}

2. 控制动画的播放和暂停 animation-play-state

属性	值
paused	暂停动画
running	播放动画