CSS过度-CSDN博客

本文链接：https://blog.csdn.net/weixin_43755916/article/details/102462264

1,transition:
默认为all
2,transition-duration
tims

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		*{margin:0;padding:0}	
			div{
				width:100px;
				height:100px;
				background-image:url(../img/icon1.png);
				background-repeat:no-repeat;
				border-radius:50%;
				background-position:0px 0px;
				background-size:100px 100px;
				transition-duration: 5s;
			}
			#d1:hover{
				transform:translate(800px) rotate(1080deg);
			}
			
			
	</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
	</body>
	
</html>

3,指定过度时间曲线函数
transition-timing-funtion
取值： 1，ease 默认值，慢速开始，速度加快，慢速结束
2，linear 匀速
3，ease-out
4，ease-in
5，ease-in-out
4,过度元素的延迟时间
transition-delay
取值 s、ms
5，过度属性编写位置
1，将过度属性放在元素声明的样式中，有去有回
2，将过度属性放在触发操作（hover）的样式中，有去无回

6，过度元素的简写方式
transition：property duration timming-function delay

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		*{margin:0;padding:0}	
			div{
				width:100px;
				height:100px;
				background-image:url(../img/icon1.png);
				background-repeat:no-repeat;
				border-radius:50%;
				background-position:0px 0px;
				background-size:100px 100px;
				transition:all 5s linear 2s;
			}
			#d1:hover{
				transform:translate(800px) rotate(1080deg);
			}
			
			
	</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
	</body>
	
</html>

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		*{margin:0;padding:0}	
			div{
				width:200px;
				height:200px;
				background:yellow;
				text-align:center;
				line-height:200px;
				font-size:30px;
				border-radius:50%;
				transition:all 5s linear 1s;
			}
			#d1:hover{
				background-color:red;
				transform:translate(800px) rotate(1080deg);
			}
			
			
	</style>
	</head>
	<body>
		<div id="d1">
			福
		</div>
	</body>
	
</html>