浅析CSS3动画

浅析CSS3动画

理解四个概念：

transform：css 2d转换

transition：css过渡（使变化以渐变形式呈现）

@keyframes：css动画关键帧（为动画设计过渡画面）

animation:css动画（引用关键帧，并设计动画时间）

要对一个dom进行2d转换，比如放大缩小、平移、旋转，就可以使用transform属性，transform可以设置的变形有：scale（放大缩小）,translate（平移）,rotate（旋转）,skew（斜切，即扭转）,matrix（以像素精度控制变形效果）。例如：

div{
	transform:scale(2,4)  translate(20px,20px)  rotate(30deg);
}

要对一个变形进行过度渐变处理，就可以使用transition属性。transition属性声称任何css属性都可以过度处理（过度对象设置为all），但实际引用中需要测试。例如对上例的变形进行过度处理：

div{
	transition:transform  2s;
}

进行css动画设计需要结合关键帧@keyframes和animation属性：

@keyframes myfirst{
	0%{background:red;}
	50%{background:blue;}
	100%{background:yellow;}
}
div{
	animation:myfirst  2s;
}