4.1. transition-property

作用：定义哪个属性需要过渡，只有在该属性中定义的属性（比如宽、高、颜色等）才会以有过渡

效果。

常用值：

  1. none ：不过渡任何属性。
  2. all ：过渡所有能过渡的属性。
  3. 具体某个属性名 ，例如： width 、 heigth ，若有多个以逗号分隔。

不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持过渡。

常见的支持过渡的属性有：颜色、长度值、百分比、 z-index 、 opacity 、 2D 变换属性、 3D 变换属性、阴影。

4.2. transition-duration

作用：设置过渡的持续时间，即：一个状态过渡到另外一个状态耗时多久。

常用值：

  1. 0 ：没有任何过渡时间 —— 默认值。
  2. s 或 ms ：秒或毫秒。
  3. 列表 ：
    • 如果想让所有属性都持续一个时间，那就写一个值。
    • 如果想让每个属性持续不同的时间那就写一个时间的列表。

4.3. transition-delay

作用：指定开始过渡的延迟时间，单位： s 或 ms

4.4. transition-timing-function

作用：设置过渡的类型

常用值：

  1. ease ： 平滑过渡 —— 默认值
  2. linear ： 线性过渡
  3. ease-in ： 慢 → 快
  4. ease-out ： 快 → 慢
  5. ease-in-out ： 慢 → 快 → 慢
  6. step-start ： 等同于 steps(1, start)
  7. step-end ： 等同于 steps(1, end)
  8. steps( integer,?) ： 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是 start 或 end ，指定每一步的值发生变化的时间点。第二个参数默认值为 end 。
  9. cubic-bezie ( number, number, number, number)： 特定的贝塞尔曲线类型。

在线制作贝赛尔曲线：https://cubic-bezier.com

4.5. transition 复合属性

如果设置了一个时间，表示 duration ；如果设置了两个时间，第一是 duration ，第二个是delay ；其他值没有顺序要求。

1
transition:1s 1s linear all;
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04_过渡案例</title>
    <style>
        .outer {
            width: 400px;
            height: 224px;
            position: relative;
            overflow: hidden;
        }
        .mask {
            width: 400px;
            height: 224px;
            background-color: black;
            color: white;
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 224px;
            font-size: 100px;
            opacity: 0;
            transition: 1s linear;
            cursor: pointer;
        }
        img {
            transition: 0.5s linear;
        }
        .outer:hover .mask {
            opacity: 0.5;
        }
        .outer:hover img {
            transform: scale(1.6) rotate(20deg);
        }
    </style>
</head>
<body>
    <div class="outer">
        <img src="../images/shanghai.jpg" alt="">
        <div class="mask">上海</div>
    </div>
    <div class="outer">
        <img src="../images/shanghai.jpg" alt="">
        <div class="mask">上海</div>
    </div>
</body>
</html>
License

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

Share

快来参与讨论吧~