上查看所有课程
CSS 过渡使 CSS 属性值在指定的持续时间内平滑地变化。例如，
div {
background-color: orange;
transition: background-color 1s linear;
}
div:hover {
background-color: red;
}浏览器输出
将鼠标悬停在下面的元素上
在这里，transition 属性将背景颜色从 orange 平滑地变为 red。
CSS 过渡属性
CSS 过渡包含以下属性
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- transition (简写属性)
让我们详细看看这些属性。
CSS transition-property
transition-property 指定应应用过渡的 CSS 属性。
transition-property 属性的语法是，
transition-property: none | all | property-name这里，
none: 没有属性会过渡all: 所有属性都会过渡-
property-name: 指定过渡的 CSS 属性
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS transition-property</title>
</head>
<body>
<p>Hover over the element below</p>
<div class="box"></div>
</body>
</html>div.box {
width: 100px;
height: 100px;
background-color: orange;
/* specifies width for the transition */
transition-property: width;
transition-duration: 1s;
}
/* styles while hovering element*/
.box:hover {
width: 200px;
}浏览器输出
将鼠标悬停在下面的元素上
在上面的例子中：
transition-property: width将 width 属性从 100px 平滑地过渡到 200px。
注意：transition-duration 的默认值是 0s，因此必须指定其值才能看到过渡效果。
CSS transition-duration 属性
transition-duration 属性指定过渡完成的时间。
transition-duration 属性的语法是
transition-duration: time-valuetime-value 表示过渡的持续时间，单位为秒 (s) 或毫秒 (ms)。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS transition-duration</title>
</head>
<body>
<p>Hover over the element below </p>
<div class="box"></div>
</body>
</html>div.box {
width: 100px;
height: 100px;
background-color: orange;
transition-property: background-color;
/* specifies the duration for transition to complete */
transition-duration: 1s;
}
/* styles while hovering element*/
.box:hover {
background-color: red;
}浏览器输出
将鼠标悬停在下面的元素上
在上面的例子中：
transition-duration: 1s指定背景颜色过渡持续 1 秒。
CSS transition-timing-function 属性
transition-timing-function 属性定义了在过渡期间过渡属性如何变化。
transition-timing-function 属性的语法是
transition-timing-function: timing-function这里，timing-function 代表以下任何值
-
ease: 过渡开始缓慢，中间加速，最后缓慢结束 -
linear: 指定在整个持续时间内匀速过渡 -
ease-in: 指定开始缓慢、结束快速的过渡 -
ease-out: 指定开始快速、结束缓慢的过渡 -
ease-in-out: 指定开始和结束都缓慢的过渡 -
step-start: 指定以即时开始并贯穿始终的过渡 -
step-end: 指定以恒定开始并即时结束的过渡 -
steps(int, start | end): 表示具有阶梯时间和定义间隔的过渡 -
cubic-bezier: 定义具有指定值的自定义过渡
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS transition</title>
</head>
<body>
<p>Hover over the element below</p>
<div class="box box1">Ease</div>
<div class="box box2">Linear</div>
<div class="box box3">Ease-In</div>
<div class="box box4">Ease-Out</div>
<div class="box box5">Ease-In-Out</div>
<div class="box box6">Step-start</div>
<div class="box box7">Step-end</div>
<div class="box box8">Steps(5,end)</div>
<div class="box box9">Cubic-bezier</div>
</body>
</html>.box {
width: 100px;
height: 100px;
text-align: center;
margin-bottom: 12px;
background-color: orange;
transition-property: width;
transition-duration: 1s;
}
/* Different timing functions for each box */
.box1 {
transition-timing-function: ease;
}
.box2 {
transition-timing-function: linear;
}
.box3 {
transition-timing-function: ease-in;
}
.box4 {
transition-timing-function: ease-out;
}
.box5 {
transition-timing-function: ease-in-out;
}
.box6 {
transition-timing-function: step-start;
}
.box7 {
transition-timing-function: step-end;
}
.box8 {
transition-timing-function: steps(5, end);
}
.box9 {
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* styles while hovering elements */
.box:hover {
width: 500px;
}浏览器输出
将鼠标悬停在下面的元素上
Ease
Linear
Ease-In
Ease-Out
Ease-In-Out
Step-start
Step-end
Steps(5,end)
Cubic-bezier
在上面的示例中，不同的过渡时间函数将 width 属性从 100px 变为容器宽度的 90%。
注意: transition-timing-function 也称为缓动函数。
CSS transition-delay 属性
transition-delay 属性指定 transition 开始的持续时间。
transition-delay 属性的语法是
transition-delay: time_valuetime_value 表示过渡开始的持续时间，单位为秒 (s) 或毫秒 (ms)。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS transition-delay</title>
</head>
<body>
<p>Hover over the element below</p>
<div class="box"></div>
</body>
</html>div.box {
width: 100px;
height: 100px;
background-color: orange;
transition-property: background-color;
/* delays the transition by 1s */
transition-delay: 1s;
}
/* styles while hovering element */
.box:hover {
background-color: red;
}浏览器输出
将鼠标悬停在下面的元素上
在上面的例子中：
transition-delay: 1s;在背景颜色从 orange 变为 red 之前，延迟 1 秒进行过渡。
注意：负时间值会产生一种错觉，即过渡在任何触发事件发生之前就已经开始。但实际上，它仍然在触发事件发生后立即开始。
CSS transition 属性
transition 是一个简写属性，用于指定 transition property、transition-duration、transition-timing-function 和 transition-delay 属性。
transition 属性的语法是
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS transition property</title>
</head>
<body>
<p>Hover over the element below</p>
<div class="box"></div>
</body>
</html>div.box {
width: 100px;
height: 100px;
background-color: orange;
transition: width 2s linear 1s;
}
/* styles while hovering element */
.box:hover {
width: 200px;
}浏览器输出
将鼠标悬停在下面的元素上
在上面的例子中：
transition: width 2s linear 1s;等同于：
transition-property: width;
transition-duration: 2 seconds;
transition-timing-function: linear;
transition-delay : 1 second;
注意: transition 属性中属性值的顺序很重要。