HTML——CSS动画效果

过渡效果：

1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性

<style type="text/css">
			.show {
				width: 200px;
				height: 200px;
				background: saddlebrown;
			}
			.show:hover {
				width: 400px;
				height: 400px;
				background: blueviolet;
			}
		</style>

这是没有过渡效果之前的

<style type="text/css">
			.show {
				width: 200px;
				height: 200px;
				background: saddlebrown;
                transition: all 2s;
			}
			.show:hover {
				width: 400px;
				height: 400px;
				background: blueviolet;
			}
		</style>

这是加了过渡效果之后的效果，所有效果延迟0.5s