CSS的过渡样式transition

使用 CSS3 transition 属性，你可以给任何元素加上“过渡”，加上过渡”的元素，在相应样式变化时，会产生动画效果。
transition属性设置元素当过渡效果，四个简写属性分别为为:transition-property(指定CSS属性的name)、transition-duration(过渡时间)、transition-timing-function(过渡函数曲线)、transition-delay(过渡延迟时间)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.sky{
				width: 100px;
				height: 200px;
				color: chartreuse;
				background: skyblue;
				transition: all 1s ease 0s;
			}
			.sky:hover{
				width: 200px;
				height: 400px;
				color: black;
				background: sandybrown;
			}
		</style>
	</head>
	<body>
		<div class="sky">
			今天天气很好
		</div>
	</body>
</html>

transition: all 1s ease 0s; 中的四个值分别对应
第一个值：要改变的样式 transition-property
第二个值：过度时间 transition-duration
第三个值：过渡函数曲线 transition-timing-function
第四个值：过渡延迟时间 transition-delay

上面的代码也可以单独设定过度属性

.sky{
				width: 100px;
				height: 200px;
				color: chartreuse;
				background: skyblue;
				transition-property:all;
				transition-duration: 1s;
				transition-timing-function: ease;
				transition-delay: 0s;
			}
posted @ 2025-01-25 10:35  觉远  阅读(59)  评论(0)    收藏  举报