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 @   觉远  阅读(18)  评论(0)  编辑  收藏  举报
相关博文：
· CSS的变形transform样式平移
· CSS的变形transform样式旋转
· CSS-transition过渡效果
· transition用法
· CSS3过渡
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛