transition属性制作CSS交互动画

523 字

3 分钟

transition属性制作CSS交互动画

2026-03-15

无标签

动画在生活中很常见，手机的APP打开就是从本来规定的图标形状变化到屏幕全屏的形状，中间时间的所有变化都是动画。在手机上就成为过渡动画，这个动画的本质目的其实就是让人脑有一个来回过程的显示，更便于其理解。这种理解的本意就是知其何来，知其何去。虽然有不少的人会觉得这种动画在Windows，Linux系统上就是增加硬件的负担，降低硬件性能，但是也是因为有来有回，而且动画使用特定的曲线让苹果在桌面系统中获得一席之地。

transition属性的属性值#

transition-property：参与变换的属性（默认值：/）
transition-duration：变化的时间长度（默认值：0）
transition-timing-function：过渡动画的贝塞尔曲线设置（默认值：ease）
transition-delay：动画开始之前的等待时间（默认值：0）

效果展示#

这几个属性便可以分开去写（效果：鼠标放在图形上时，正方形在1秒之内使用ease的贝塞尔曲线值转变成圆形）：

1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <meta charset="utf-8">
5
        <style>
6
            .box {
7
                width: 100px;
8
                height: 100px;
9
                background-color: tomato;
10
                margin: 50px auto;
11

12
                transition-property: border-radius;
13
                transition-duration: 1s;
14
                transition-timing-function: ease;
15
                transition-delay: 0s;
16
            }
17

18
            .box:hover {
19
                border-radius: 50%;
20
            }
21
        </style>
22
    </head>
23
    <body>
24
        <div class="box"></div>
25
    </body>
26
</html>

将其整合成transtion一个属性：

格式：

transtion: 变化属性变化时间变化时使用的贝塞尔曲线开始动画前的等待时间, 变化属性变化时间变化时使用的贝塞尔曲线开始动画前的等待时间

1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <meta charset="utf-8">
5
        <style>
6
            .box {
7
                width: 100px;
8
                height: 100px;
9
                background-color: tomato;
10
                margin: 50px auto;
11

12
                transition: border-radius 1s ease;
13
            }
14

15
            .box:hover {
16
                border-radius: 50%;
17
            }
18
        </style>
19
    </head>
20
    <body>
21
        <div class="box"></div>
22
    </body>
23
</html>

同时操作两个属性一起变化（效果：鼠标放在图形上时，正方形在1秒之内使用ease的贝塞尔曲线值转变成圆形，同时宽度增加100px）：

1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <meta charset="utf-8">
5
        <style>
6
            .box {
7
                width: 100px;
8
                height: 100px;
9
                background-color: tomato;
10
                margin: 50px auto;
11

12
                transition: all 1s ease;
13
            }
14

15
            .box:hover {
16
                width: 200px;
17
                border-radius: 50%;
18
            }
19
        </style>
20
    </head>
21
    <body>
22
        <div class="box"></div>
23
    </body>
24
</html>