CSS - transition-property 属性_CSS 菜鸟教程

CSS transition-property 属性指定应应用过渡效果的 CSS 属性。

注意：如果 transition-duration 属性设置为 0，则过渡将不起作用。

可能的值

none − 任何属性都不会发生任何转换。
All- 每个可以过渡的属性都会。
<custom-ident> - 一个字符串，指示当其值更改时哪个属性应具有过渡效果。

适用于

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

使用简写属性（例如背景）时，所有支持动画的速记子属性都将进行动画处理。

语法

关键字值

transition-property: none;
transition-property: all;

<custom-ident>值

transition-property: data_05;
transition-property: -data;
transition-property: data-column;

多个值

transition-property: data4, animation5;
transition-property: all, height, color;
transition-property:
	 all,
	 -moz-specific,
	 sliding;

CSS transition-property - none 值

以下示例演示了 transition-property： none 不会对任何属性应用任何过渡效果 -

<html>
<head>
<style>
	 	.box {
	 	 	 width: 100px;
	 	 	 padding: 10px;
	 	 	 transition-property: none;
	 	 	 transition-duration: 3s;
	 	 	 background-color: pink;
	 	}
	 	.box:hover,
	 	.box:focus {
	 	 	 margin-left: 80px;
	 	 	 background-color: lightgrey;
	 	}
</style>
</head>
<body>
	 	<div class="box">Hover over me</div>
</body>
</html>

CSS transition-property - 所有值

以下示例演示了使用 transition-property： all 时，过渡效果将应用于所有可以进行动画处理的属性 -

<html>
<head>
<style>
	 	.box {
	 	 	 width: 100px;
	 	 	 padding: 5px;
	 	 	 transition-property: all;
	 	 	 transition-duration: 3s;
	 	 	 background-color: lightgray;
	 	}
	 	.box:hover,
	 	.box:focus {
	 	 	 margin-left: 80px;
	 	 	 background-color: pink;
	 	 	 padding: 15px;
	 	 	 border: 4px solid blue;
	 	}
</style>
</head>
<body>
	 	<div class="box">Hover over me</div>
</body>
</html>

CSS transition-property - <custom-ident> 值

以下示例演示了如何使用 CSS 自定义属性（--pink-color）在 background-color 属性上定义粉红色。当您将鼠标悬停在框上或聚焦在框上时，元素的背景颜色会根据自定义属性的值而变化 -

<html>
<head>
<style>
	 	html {
	 	 	 --pink-color: pink;
	 	}
	 	.box {
	 	 	 width: 100px;
	 	 	 padding: 10px;
	 	 	 transition-property: 	background-color;	
	 	 	 transition-duration: 4s;
	 	 	 background-color: lightgray;
	 	}
	 	.box:hover,
	 	.box:focus {
	 	 	 background-color: var(--pink-color);	
	 	}
</style>
</head>
<body>
	 	<div class="box">Hover over me</div>
</body>
</html>

CSS transition-property - 使用属性值

以下示例演示了当 transition-property 设置为 padding 时，当您将鼠标悬停在框上或聚焦在框上时，填充值将更改为 15px −

<html>
<head>
<style>
	 	.box {
	 	 	 width: 100px;
	 	 	 transition-property: padding;
	 	 	 transition-duration: 3s;
	 	 	 background-color: lightgray;
	 	}
	 	.box:hover,
	 	.box:focus {
	 	 	 padding: 15px;
	 	}
</style>
</head>
<body>
	 	<div class="box">Hover over me</div>
</body>
</html>

<< CSS - transition-duration 属性 CSS - transition-timing-function 属性 >>