【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟等多个参数

用户11865655

发布于 2025-10-13 17:57:49

12400

代码可运行

文章被收录于专栏：CSDN专栏CSDN专栏

运行总次数：0

代码可运行

transition过渡属性

早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标经过、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：

在默认样式中声明元素的初始状态样式；
声明过渡元素最终状态样式，比如悬浮状态；
在默认样式中通过添加过渡函数，添加一些不同的样式。

CSS3的过渡transition属性是一个复合属性，主要包括以下几个子属性：

详细参数	说明
transition-property	指定过渡或动态模拟的CSS属性
transition-duration	指定完成过渡所需的时间
transition-timing-function	指定过渡函数
transition-delay	指定开始出现的延迟时间

transition-property 模拟css属性

transition-property指定对THML元素的哪个css属性进行平滑渐变处理，该属性可以指定例如background-color,width,height等各种标准的CSS属性。

特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。

用一个简单的例子来说明这个问题：假设你的初始状态设置了样式“width”,“height”,“background”,当你在最终状态都改变了这三个属性，那么all代表的就是“width”、“height”和“background”。如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>07动画--过渡属性 transition-property档</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div></div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
div {
	width: 300px;
	height: 300px;
	margin: 100px auto;
	background-color: #900;
	/*transition:background-color 1s ease .2s;
	-webkit-transition: background-color .5s ease .1s;*/
	transition-property:background-color;
	transition:all 5s ease .2s;
	
	/*-webkit-transition: all .5s ease .1s;
	transition:all .5s ease .1s;*/
}
div:hover {
	/*width: 400px;
	height: 400px;*/
	background-color: #FF0;
}

/*在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同*/

请牢记，transition过渡属性一定是放在需要显示过渡效果的元素中

transition-duration 过渡所需时间指定

transition-duration 属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>08动画--过渡所需时间 transition-duration</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div></div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
div {
	width: 300px;
	height: 200px;
	margin: 100px auto;
	background-color: #900;
	transition-property: all;
	/*-moz-transition-property: border-radius;
	-webkit-transition-property: border-radius;*/
	transition-duration: 1.5s;
	transition-timing-function:linear;
	/*-moz-transition-duration: .5s;
	-webkit-transition-duration: .5s;*/
	
}
div:hover {
	border-radius: 50%;
	background-color: #344FB3;
}

transition-timing-function 过渡函数

transition-timing-function 属性指的是过渡的“缓动函数”。

主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况

其中要包括以下几种函数：

参数	说明
ease	默认值，动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度。
linear	线性速度。动画开始时的速度和结束时的速度一样（匀速）。
ease-in	动画开始的速度较慢，然后速度加快。
ease-out	动画开始的速度很快，然后速度减慢。
ease-in-out	动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>09动画--过渡函数 transition-timing-function</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
div {
	width: 200px;
	height: 100px;
	margin: 10px auto;
	background: #900;
	transition-property: border-radius;
	-webkit-transition-property: -webkit-border-radius;
	-moz-transition-property: -moz-border-radius;
	transition-duration: .5s;
	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	transition-delay: .2s;/*transition-timing-function:ease;*/
	/*transition-timing-function:linear;*/
	/*transition-timing-function:ease-in;	*/
	/*transition-timing-function:ease-out;*/	
	/*transition-timing-function:ease-in-out;	*/
}
div:hover {
	border-radius: 100%;
}
.one {
	transition-timing-function: ease;
}
.two {
	transition-timing-function: linear;
}
.three {
	transition-timing-function: ease-in;
}
.four {
	transition-timing-function: ease-out;
}
.five {
	transition-timing-function: ease-in-out;
}

示例2

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #wrapper{
            width:1024px;
            margin:0 auto;
        }
        .progress-bar{
            height:40px;
            width:40px;
            background-color: #69c;
        }
        .progress-bar:hover{
            width:960px;
        }

        #bar1{
            -webkit-transition: width 5s linear;
        }
        #bar2{
            -webkit-transition: width 5s ease;
        }
        #bar3{
            -webkit-transition: width 5s ease-in;
        }
        #bar4{
            -webkit-transition: width 5s ease-out;
        }
        #bar5{
            -webkit-transition: width 5s ease-in-out;
        }
    </style>
</head>
<body>

    <div id="wrapper">
        <p>linear</p>
        <div class="progress-bar" id="bar1"></div>

        <p>ease</p>
        <div class="progress-bar" id="bar2"></div>

        <p>ease-in</p>
        <div class="progress-bar" id="bar3"></div>

        <p>ease-out</p>
        <div class="progress-bar" id="bar4"></div>

        <p>ease-in-out</p>
        <div class="progress-bar" id="bar5"></div>
    </div>
</body>
</html>

transition-delay 过渡时间延迟

transition-delay属性和transition-duration属性极其类似，不同的是 transition-duration 是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。

有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：

第一个时间的值为 transition-duration，第二个为transition-delay。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>10动画--过渡延迟时间 transition-delay</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
	<div class="wrapper">
    	<div><span>请把鼠标放我这儿</span></div>
    </div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
.wrapper {
	width: 400px;
	height: 400px;
	margin: 100px auto;
	border:2px dotted #906;
}
.wrapper div{
	width:200px;
	height:200px;
	line-height:200px;
	text-align:center;
	font-size:20px;
	color:#fff;
	background-color:#90F;
/*	transition-property:all;
	transition-duration:3s;
	transition-timing-function:linear;
	transition-delay:1s;*/
	transition:all 3s ease-in;
		/*transition:all 1s ease-in .1s;*/
/*	-webkit-transition:all 1s ease-in .1s;
	-moz-transition:all 1s ease-in .1s;*/
}
.wrapper div:hover{
	width:300px;
	height:300px;
	background-color:#F39;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-09-20，如有侵权请联系 cloudcommunity@tencent.com 删除

css