transtion

编程入门行业动态更新时间:2024-10-28 21:26:01

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		 *{
            margin: 0;
            padding: 0;
        }
        div
        {
        	width: 100px;
        	height: 50px;
        	background-color: red;
        	transition-property: width;
        	transition-duration: 1s;
        	/*transition: width 1s linear 0s,background-color 1s linear 0s;*/
        	/*transition: width 5s,background-color 5s,height 5s;*/
        	transition: all 5s;

        }
        div:hover{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
	</style>
</head>
<body>
	<div></div>
<!--
1.过渡连写格式
transition: 过渡属性 过渡时长 运动速度 延迟时间;

2.过渡连写注意点
2.1和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可
2.2连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素
2.3如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为
transition:all 0s;
-->
</body>
</html>