CSS - transition 属性

CSS transition 属性允许您在指定的持续时间内对元素的样式属性更改进行动画处理。它们提供了一种简单有效的方法，可以将动画添加到 Web 元素中，而无需复杂的 JavaScript 代码或外部库。

CSS transition 属性是下面的简写属性

transition-property
transition-duration
transition-timing-function
transition-delay
transition-behavior （此属性基于实验性，可能不受支持）。

可能的值

<length> - 特定的长度值，例如像素（px）、厘米（cm）、英寸（in）等。

适用于

所有元素，：：before 和：：after 伪元素。

语法


transition: margin-right 4s;
transition: margin-right 4s 1s;
transition: margin-right 4s ease-in-out;
transition: margin-right 4s ease-in-out 1s;
transition: display 4s allow-discrete;
transition: margin-right 4s, color 1s;

transition 属性的值定义为以下值之一：

none 值表示此元素上不会有过渡。这是默认值。
逗号用于分隔一个或多个单属性转换。

单属性转换指定一个特定属性或所有属性的转换。这包括：

一个零值或一个值，指示应应用转换的一个或多个属性。这可以指定为：

表示单个属性的<custom-ident>。
transitions 中的 all 值表示当元素更改其状态时，转换将应用于更改的所有属性
如果未指定任何值，则将假定所有值，并且转换将应用于所有更改的属性。

指定零或一个 <easing-function> 值，指示要使用的缓动函数。

为过渡属性指定零、一个或两个 <time> 值。第一个 parsed-time 值应用于 transition-duration，第二个值分配给 transition-delay。

如果属性具有离散动画行为，则值为 0 或 1 指示是否启动过渡。如果该值存在，它可以是 allow-discrete 或 normal 关键字。

CSS transition - 有两个值

以下示例演示将过渡应用于持续时间为 2 秒的 padding 属性。当您将鼠标悬停在框上时，填充增加到 15px，背景颜色变为黄绿色 -


<html>
<head>
<style>
	 	.box {
	 	 	 font-size: 14px;
	 	 	 width: 100px;
	 	 	 padding: 5px;
	 	 	 transition: padding 2s;
	 	 	 background-color: lightskyblue;
	 	}
	 	.box:hover {
	 	 	 background-color: greenyellow;
	 	 	 padding: 15px;
	 	}
</style>
</head>
<body>
	 	<div class="box">Hover over me</div>
</body>
</html>

CSS transition - 延迟值

下面的示例演示将转换应用于 padding 属性。转换需要 2 秒才能完成，延迟 0.5 秒后开始 -


<html>
<head>
<style>
	 	.box {
	 	 	 font-size: 14px;
	 	 	 width: 100px;
	 	 	 padding: 5px;
	 	 	 transition: padding 2s .5s;
	 	 	 background-color: lightskyblue;
	 	}
	 	.box:hover {
	 	 	 background-color: greenyellow;
	 	 	 padding: 15px;
	 	}
</style>
</head>
<body>
	 	<div class="box">Hover over me</div>
</body>
</html>

CSS transition - 缓和函数

下面的示例演示将过渡应用于 background-color 属性。当您将鼠标悬停在框上时，背景颜色会变为黄绿色，在 4 秒内通过缓进出计时功能开始平滑的颜色过渡 -


<html>
<head>
<style>
	 	.box {
	 	 	 font-size: 14px;
	 	 	 width: 100px;
	 	 	 padding: 15px;
	 	 	 transition: background-color 4s ease-in-out;
	 	 	 background-color: lightskyblue;
	 	}
	 	.box:hover {
	 	 	 background-color: greenyellow;
	 	}
</style>
</head>
<body>
	 	<div class="box">Hover over me</div>
</body>
</html>

CSS transition - 缓和函数和延迟

下面的示例演示将转换应用于 padding 属性。当您将鼠标悬停在框上时，背景颜色变为黄绿色，填充增加到 15px，在 4 秒的时间内开始平滑过渡，并具有缓入出计时功能和 0.7 秒的延迟 -


<html>
<head>
<style>
	 	.box {
	 	 	 font-size: 14px;
	 	 	 width: 100px;
	 	 	 padding: 5px;
	 	 	 transition: padding 4s ease-in-out 0.7s;
	 	 	 background-color: lightskyblue;
	 	}
	 	.box:hover {
	 	 	 background-color: greenyellow;
	 	 	 padding: 15px;
	 	}
</style>
</head>
<body>
	 	<div class="box">Hover over me</div>
</body>
</html>

CSS 过渡 - 行为值

下面的示例演示将过渡应用于 background-color 属性。当您将鼠标悬停在框上时，背景颜色会变为黄绿色，使用允许-离散计时函数在 5 秒内开始平滑过渡 -


<html>
<head>
<style>
	 	.box {
	 	 	 font-size: 14px;
	 	 	 width: 100px;
	 	 	 padding: 10px;
	 	 	 transition: background-color 5s allow-discrete;
	 	 	 background-color: lightskyblue;
	 	}
	 	.box:hover {
	 	 	 background-color: greenyellow;
	 	}
</style>
</head>
<body>
	 	<div class="box">Hover over me</div>
</body>
</html>

CSS 过渡 - 应用于两个属性

以下示例演示了过渡将在 2 秒内应用于文本颜色，在 4 秒内应用于左边距。文本颜色将在 2 秒内过渡，而左边距将需要 4 秒 -


<html>
<head>
<style>
	 	.box {
	 	 	 font-size: 14px;
	 	 	 width: 100px;
	 	 	 padding: 10px;
	 	 	 transition: color 2s, margin-left 4s;
	 	 	 background-color: lightskyblue;
	 	}
	 	.box:hover {
	 	 	 color: red;
	 	 	 margin-left: 70px;
	 	}
</style>
</head>
<body>
	 	<div class="box">Hover over me</div>
</body>
</html>

CSS transition - 相关属性

以下是与过渡相关的 CSS 属性列表：

属性	值
transition-delay	确定当属性的值更改时，在开始过渡效果之前等待的时间量。
transition-duration	确定过渡动画完成所需的时间。
transition-property	指定应应用过渡效果的 CSS 属性。
transition-timing-function	确定为受过渡效果影响的 CSS 属性生成哪些中间值。

打印本页