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;
}

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

更改多个属性值

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

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

这表示 width 的更改应在 2s 内发生，height 的更改应在 4 秒内发生，background-color 的更改应在 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	用于指定运行过渡的时间函数	尝试一下

打印页面