HTML5开发系列之过渡动画

最新推荐文章于 2024-06-27 12:40:34 发布

原创最新推荐文章于 2024-06-27 12:40:34 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

Html 5 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了CSS3的过渡动画特性，通过一个示例展示了如何使用transition属性为元素的宽度、高度和背景颜色添加平滑的过渡效果。文章包含了一个HTML代码示例，演示了当鼠标悬停在div元素上时，元素大小和颜色的变化过程。

过渡动画

transition 属性可以在属性之间参数多个帧数进行显示，这样就会看起来和动画效果一样的；

可以实现类似小米官网上的鼠标移动上去产生阴影效果，动态的添加阴影，盒子的位置；

过渡动画是css3出现的新特性；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height:100px;
				background-color: yellow;
				transition: all;	/*属性width height background-color 三个属性变化*/
				transition-duration: 500ms;
				transition-delay: 1000ms;		/*延迟1000ms执行动画*/
			}
			div:hover{
				width: 200px;		
				height: 200px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>