C3:Transitions(过渡动画)的简单用法

最新推荐文章于 2022-04-10 11:53:24 发布

鸣_c

最新推荐文章于 2022-04-10 11:53:24 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/C_755028787/article/details/105778152

版权

定义和用法：

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property ：检索或设置对象中的参与过渡的属性
transition-duration ：检索或设置对象过渡的持续时间
transition-timing-function ：检索或设置对象中过渡的动画类型
transition-delay ：检索或设置对象延迟过渡的时间
注意：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

具体属性值请参考css手册
比较常见的用法：
当盒子的尺寸、颜色等属性发生变化时，过渡营造展开收缩、渐变等效果。

如果对其中一个属性过渡
例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单个属性的过渡</title>
	<style type="text/css">
		div{
			width: 50px;
			height: 50px;
			background-color: red;
			transition: width  2s;
		}
		div:hover{
			width: 300px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

对其中数个属性过渡
复合写法：transition ：属性过渡的时长，属性过渡的时长…
多个属性的过渡中间用 ,分隔
例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>对发生改变的属性中的其中几种进行过渡</title>
	<style type="text/css">
		div{
			width: 50px;
			height: 50px;
			background-color: red;
			transition: width 2s,color 3s;/*对宽度和颜色过渡*/
		}
		div:hover{
			width: 300px;
			height: 300px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

当要所有发生改变的属性都过渡时，可以简写为：
transition : all transition-duration;
all匹配所有可以过渡的属性。

注意：不是所有的属性都可以使用过渡动画，只有有量化数值的属性才能使用transition,例如：宽、高、颜色、透明度等属性可以使用。例如display就不能使用

transition-timing-function (检索或设置对象中过渡的动画类型)

取值：	效果
linear：	线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease:	平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：	由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：	由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：	由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：	等同于 steps(1, start)
step-end：	等同于 steps(1, end)
steps([, [ start	end ] ]?)：
cubic-bezier(, , , )：	特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

例：匀速运动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	</title>
	<style type="text/css">
		div{
			width: 50px;
			height: 50px;
			background-color: red;
			transition: width 2s;
			transition-timing-function: cubic-bezier(0,0,1,1);
			/*可以理解为前两个数值是起始点的x、y坐标（0，0），后两个值是结束点的x、y坐标（1，1）*/
		}
		div:hover{
			width: 300px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

在这里插入图片描述

transition-delay ：检索或设置对象延迟过渡的时间

例：

	<meta charset="UTF-8">
	<title>	</title>
	<style type="text/css">
		
		div{
			width: 50px;
			height: 50px;
			background-color: red;
			transition: width 2s;
			transition-delay: 2s;/*触发动画后，延迟两秒展开，展开结束后延迟两秒收缩*/
		}
		div:hover{
			width: 300px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>