过渡属性transition

玺影儿

已于 2024-06-12 15:21:34 修改

阅读量453

点赞数 10

分类专栏： web-HTML web 文章标签： javascript 前端 css

于 2024-06-12 15:20:09 首次发布

本文链接：https://blog.csdn.net/m0_65696193/article/details/139626317

版权

web 同时被 2 个专栏收录

64 篇文章 0 订阅

订阅专栏

web-HTML

6 篇文章 0 订阅

订阅专栏

*transition这个属性添加在谁的身上就在谁的身上发生变化！！！注意：不要加在hover上！！！*

例如：在box盒子上就在box盒子上变化

1、瞬间变长，看不到过程

<!DOCTYPE html>  <!--文档类型-->
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>过渡属性transition</title>
		<!---->

		<style>
			.box{
				width: 300px;
				height: 50px;
				background-color: green;
			}
			.box:hover{
				width: 600px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

2、水平垂直的过渡效果一样的，可以看到过程。(一般用这个）

过渡属性：transition: all 1s;

过渡属性：transition: all .3s; (一般用这个）更快

<!DOCTYPE html>  <!--文档类型-->
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>过渡属性transition</title>
		<!---->

		<style>
			.box{
				width: 300px;
				height: 50px;
				background-color: green;
				transition: all 1s;
			}
			.box:hover{
				width: 600px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

3、过渡效果，可以看到过程。

水平的过渡效果，垂直是瞬间过渡效果属性：transition: width 1s;

<!DOCTYPE html>  <!--文档类型-->
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>过渡属性transition</title>
		<!---->

		<style>
			.box{
				width: 300px;
				height: 50px;
				background-color: green;
				transition: width 1s;
			}
			.box:hover{
				width: 600px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

4、水平与垂直效果不一样的，过渡过程

过渡效果属性：transition: width 1s,height 2s;

<!DOCTYPE html>  <!--文档类型-->
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>过渡属性transition</title>
		<!---->

		<style>
			.box{
				width: 300px;
				height: 50px;
				background-color: green;
				transition: width 1s,height 2s;
			}
			.box:hover{
				width: 600px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

5、transition：要发生变化的属性名发生过渡时间动画曲线（先快，后慢；先慢，后快）；

transition: all 10s;

<!DOCTYPE html>  <!--文档类型-->
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>过渡属性transition</title>
		<!---->

		<style>
			.box{
				width: 300px;
				height: 50px;
				background-color: green;
				transition: all 10s;
			}
			.box:hover{
				width: 600px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

6、

transition：要发生变化的属性名发生过渡时间动画曲线（先快，后慢；先慢，后快）；

transition: all 10s linear;

<!DOCTYPE html>  <!--文档类型-->
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>过渡属性transition</title>
		<!---->

		<style>
			.box{
				width: 300px;
				height: 50px;
				background-color: green;
				transition: all 10s linear;
			}
			.box:hover{
				width: 600px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

7、

transition: all 10s ease;

<!DOCTYPE html>  <!--文档类型-->
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>过渡属性transition</title>
		<!---->

		<style>
			.box{
				width: 300px;
				height: 50px;
				background-color: green;
				transition: all 10s ease;
			}
			.box:hover{
				width: 600px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

8、transition：要发生变化的属性名发生过渡时间动画曲线（先快，后慢；先慢，后快）过渡的延迟时间；

延迟2s后,再过渡

transition: all 10s linear 2s;

<!DOCTYPE html>  <!--文档类型-->
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>过渡属性transition</title>
		<!---->

		<style>
			.box{
				width: 300px;
				height: 50px;
				background-color: green;
				transition: all 10s linear 2s;
			}
			.box:hover{
				width: 600px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>