css3之animation与transition的差异

animation和transition都可以设置元素的动效，不同的是animation作用于DOM元素，如div, 强调播放动画；transition作用于元素的属性，如div.width，强调反馈动画。

示例代码

@keyframes k1 {
	from { background-color: #888; }
	to { background-color: #555; }
}
.anim-main > p {
	width: 300px;
	height: 30px;
	color: #ddd;
	transition: all .2s ease 0;
	animation: k1 1s infinite alternate ;
}
.anim-main > p:hover {
	width: 500px;
	height: 50px;
}

<div class="anim-main">
	<p>我是一行字</p>
</div>

代码分析

• animation-name: keyframes框架定义；
• transition-name: 元素的属性(width/height), 可以单独指定也可以all表示所有属性；