CSS Transition-timing-function属性的用法

Usage of CSS transition-timing-function property

使用transition-timing-function属性设置过渡效果的速度曲线。您可以设置的值包括缓动，缓动，缓动，线性等。

您可以尝试运行以下代码以使用CSS设置过渡效果的速度曲线

例

现场演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 4s;
}
#effect1 {
transition-timing-function: linear;
}
#effect2 {
transition-timing-function: ease-in;
}
div:hover {
width: 250px;
}
</style>
</head>
<body>
Transition Effect
<p><center>[wp_ad_camp_2]</center></p><p>
Hover over the div elements and see the transition effect and the speed:
</p>
linear effect
ease-in effect
</body>
</html>