CSS - 过渡

CSS 过渡用于处理 CSS 中的动画速度。这允许您在指定持续时间内为元素的样式属性更改设置动画。

CSS 过渡示例

在这里您可以看到 CSS 过渡的简单效果，我们已在一个元素上应用了过渡，以便您可以区分有和没有过渡效果的情况。

无过渡

有过渡

如何在 CSS 中使用过渡？

请按照以下步骤在 CSS 中创建过渡效果。

选择元素： 使用 CSS 选择器 来定位要应用过渡的特定 DOM 元素。
指定属性： 对于 transition 属性的值，选择要设置动画的 CSS 属性（例如，background-color、width）。
设置持续时间： 定义过渡应持续多长时间（例如，0.5s 表示 0.5 秒）。此属性的默认值为 0，因此，如果您未为此指定正值，则不会看到任何过渡效果。
定义时间函数和延迟： 这些是可选属性。时间函数定义过渡的速度曲线（ease、linear 等），延迟定义过渡开始之前的等待时间。
定义最终状态： 指定与元素交互时属性的最终状态（例如，悬停时）。

.selector {
    width: 10px;
    transition: width 2s ease 0s;
}    
.selector:hover {
    width: 20px;
}

此声明将创建一个持续 2 秒的过渡效果，使用 ease 函数将宽度属性从 10px 更改为 20px（悬停时）。

更改多个属性值

我们可以通过指定以逗号分隔的值来为不同的属性定义不同的过渡效果，如下所示。

div {
    transition: width 2s, height 4s, background-color 3s;
}

这表示宽度变化应在 2 秒内发生，高度变化应在 4 秒内发生，背景颜色变化应在 3 秒内发生。现在让我们来看一个例子。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        body{
            padding: 30px;
            background-color: #f0f0f0;
            height: 250px;
        }
        div {
            width: 100px;
            height: 100px;
            padding: 8px;
            color: white;
            background-color: darkgreen;
            transition: width 2s, height 4s, background-color 3s;
        }
        div:hover {
            width: 200px;
            height: 200px;
            background-color: white;
        }
    </style>
</head>

<body>
    <div> 
        Hover over me
    </div>
</body>

</html>

过渡的速度曲线

CSS transition-timing-function 属性用于指定 CSS 过渡的速度曲线。它定义了如何计算过渡开始和结束之间的中间值。

div {
    transition: width 2s, height 4s;
    transition-timing-function: ease; 
}

我们也可以在 transition 属性中将时间函数作为第三个值定义。

以下是时间函数的值

ease：过渡将先慢后快，然后慢慢结束（默认值）
linear：从开始到结束以相同速度过渡
ease-in：以缓慢的启动速度过渡
ease-out：以缓慢的结束速度过渡
ease-in-out：以缓慢的启动和结束速度过渡
cubic-bezier(n,n,n,n)：这允许我们为速度定义自己的值。要了解更多信息，请查看 三次贝塞尔函数 文章。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: #3498db;
            transition: width 3s;
            left: 0;
        }

        div:hover {
            width: 300px;
        }
    </style>
</head>

<body>
    <h1>Hover Each to see transition</h1>
    <h2>linear</h2>
    <div style="transition-timing-function: linear;">
    </div>

    <h2>ease</h2>
    <div style="transition-timing-function: ease;">
    </div>

    <h2>ease-in</h2>
    <div style="transition-timing-function: ease-in;">
    </div>

    <h2>ease-out</h2>
    <div style="transition-timing-function: ease-out;">
    </div>

    <h2>ease-in-out</h2>
    <div style="transition-timing-function: ease-in-out;">
    </div>

    <h2>cubic-bezier(0.25, 0.1, 0.25, 1)</h2>
    <div style="transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);">
    </div>
</body>
</html>

延迟过渡效果

transition-delay 属性用于指定过渡开始前的等待时间。我们也可以使用 transition 简写属性来指定。

div {
    transition: width 2s;
    transition-delay: 2s; 
}

示例

当您将鼠标悬停在输出中的 div 元素上时，过渡将在等待 1 秒后发生。

<!DOCTYPE html>
<html>

<head>
    <style>
        body{
            padding: 30px;
            background-color: #f0f0f0;
            height: 250px;
        }
        div {
            width: 100px;
            height: 100px;
            padding: 8px;
            color: white;
            background-color: darkgreen;
            transition: width 2s, height 4s, background-color 3s;
            transition-delay: 1s; 
        }
        div:hover {
            width: 200px;
            height: 200px;
            background-color: white;
        }
    </style>
</head>

<body>
    <div> 
        Hover over me
    </div>
</body>

</html>

过渡 + 变换

CSS transform 也可与过渡效果一起使用。查看下面的代码。

div {
    transition: transform 2s;
}

此声明指定如果将变换（如缩放、旋转或平移）应用于 div，则变换效果将在 2 秒内平滑地进行动画。

示例

<!DOCTYPE html>
<html>

<head>
    <style> 
        div {
          width: 100px;
          height: 100px;
          background: darkgreen;
          transition: transform 2s;
        }
        
        div:hover {
          transform: rotate(180deg);
        }
    </style>
</head>

<body>
    <p>Hover over the div element below:</p>
    <div></div>
</body>

</html>

CSS 过渡简写属性

CSS transition 是以下属性的简写属性。

div{
    transition: [property] [duration] [timing-function] [delay];
}

property： 指定应用过渡的 CSS 属性的名称（例如，width、height、transform）。您可以使用 all 将过渡应用于所有更改的属性。
duration： 指定过渡效果应持续多长时间（例如，2s 表示 2 秒）。
timing-function： 指定过渡的速度曲线。
delay： 设置过渡开始之前的延迟（例如，0.5s 表示半秒）。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: all 2s ease-in 0.5s;
        }
        
        div:hover{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

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

</html>

CSS 过渡所有属性

一些在 CSS 中用于过渡的常见属性

属性	描述	示例
transition	所有过渡属性的简写属性。	试试看
transition-delay	用于指定过渡开始前的等待时间。	试试看
transition-property	用于指定属性名称	试试看
transition-timing-function	用于指定运行过渡的时间函数	试试看

打印页面