CSS3新增

对比transition和animation

transition	animation
事件触发	自动加载
着重属性变化	@keyframe帧的变化
需要-webkit兼容	需要-webkit兼容

1. transition

div{
	width:100px;
	height:100px;
	transition:width 2s;
	-webkit-transition:width 2s;
}
div:hover{
width:300px;
}

2. animation

div{
	width:100px;
	height:100px;
	position:relative;
	animation: moveRight 5s 
	webkit-animation: moveRight 5s 
}
@keyframe moveRight{
	form{left:0px;}
	to{left:200px;}
}
@webkit-@keyframe moveRight{
	from{left:0px;}
	to{left:200px;}
}

来源：CSDN

作者：代码写的完嘛

链接：https://blog.csdn.net/qq_40781291/article/details/104568960