CSS动画

CSS中的动画类型

transition补间动画（有开头有结尾，浏览器自己补中间）

要求元素状态有变化，如hover

.container{
	width:100px;
	height:100px;
	background:red;
	transition:width 1s;
	/*transition-delay:1s 延迟一秒再动*/
	/*tranisition: 延迟时间 哪个属性 动画时间，可以有多个; */
	/*transition-timing-function:   动画的时间和进度之间的关系*/
}
.container:hover{
	width:800px;
}

keyframe关键帧动画

指定动画的关键路径，如A -> B -> C它们之间由补间动画自动补出来。相当于多的补间动画组合在一起，但是与元素的状态无关。

.container{
	width: 100px;
	height: 100px;
	background: red;
	animation: run 1s;
	/*animation-direction:reverse 正向还是反向*/
	/*animation-iteration-count: 循环次数 infinite(循环次数)*/
	/*animation-play-state: paused 动画暂停*/
	/*animation-fill-mode: forwards(动画完成停在最后) backwards(回到一开始的地方)*/
}
@keyframes run {
	0%{
		width: 100px;
	}
	100%{
		width: 800px;
	}
}

逐帧动画

每一帧都是关键帧，没有补间的动画。

.container{
	width: 100px;
	height: 100px;
	border: 1px solid red;
	background: url(./animal.png) no-repeat;
	animation: run 1s infinite;
	animation-timing-function: steps(1);
}
@keyframes run{
	0%{
		background-position: 0 0;
	}
	12.5%{
		background-position: -100px 0;
	}
	37.5%{
		background-position: -300px 0;
	}
}

面试题

CSS动画的实现方式有几种

transition
keyframes(animation)

过度动画和关键帧动画的区别

过度动画需要有状态变化
关键帧动画不需要状态变化
关键帧动画能控制更精细