【CSS】10-css过渡_css 过渡先快后慢-优快云博客

本文链接：https://blog.youkuaiyun.com/Jeffhan_java/article/details/125993290

本文详细介绍了CSS过渡（transition）的使用方法，通过实例展示如何为元素设置线性、缓入缓出等不同过渡效果，并演示了hover触发的位移、缩放、倾斜和旋转动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

10-css过渡

过渡transition

1.过渡

过渡：
    transition：需要过渡的属性 过渡总时间  过渡函数 延迟时间;
    过渡函数：linear线性，ease-in先慢后快，ease-out先快后慢，ease-in-out先慢后快再慢

实例：

<style type="text/css">
	.clear-float::after {
		content: '';
		display: block;
		float: none;
		clear: both;
	}
	
	#bg-div {
		width: 976px;
		margin: 0 auto;
	}
	
	.div-style-1 {
		width: 200px;
		height: 250px;
		border: solid 2px green;
		background-color: yellowgreen;
		
		float: left;
		
		color: white;
		font-size: 40px;
		text-align: center;
		line-height: 250px;
		
		margin: 100px 20px;
		
		cursor: pointer;
		
		/* 过渡：所有属性不延时线性过渡1秒 */
		transition: all 1s linear 0s;
	}
	
/* 			#div1 {
		transition: all 1s linear 0s;
	} */
	
	/* 位移 */
	#div1:hover {
		transform: translate(20px, 20px);
		background-color: red;
	}
	
	/* 缩放 */
	#div2:hover {
		transform: scale(0.8) rotate(90deg);
	}
	
	/* 倾斜 */
	#div3:hover {
		transform: skew(45deg);
	}
	
	/* 旋转 */
	#div4:hover {
		/* transform: rotate(90deg); */
		transform: rotateY(180deg);
	}
	
</style>
</head>
<body>
<div id="bg-div" class="clear-float">
	<div id="div1" class="div-style-1">
		DIV1
	</div>
	
	<div id="div2" class="div-style-1">
		DIV2
	</div>
	<div id="div3" class="div-style-1">
		DIV3
	</div>
	<div id="div4" class="div-style-1">
		DIV4
	</div>
</div>
</body>