CSS 过渡 – 代码cn 代码吧

CSS 过渡使我们能够从一组样式平滑过渡到另一组样式。没有它们，您的悬停、单击和变换效果可能看起来很突兀。为了说明 CSS 过渡，下面是两个表情符号。单击它们以查看差异：

⚡️有过渡 ⚡️无过渡

CSS 过渡生成器#

作为本教程的一部分，我创建了一个 CSS 过渡生成器，它可以让您玩转过渡并了解它是如何工作的。使用此工具生成您自己的自定义过渡。过渡的时间由关键字（例如ease-in）或三次贝塞尔函数控制，您可以在下面对其进行操作。如果您想了解更多信息，请阅读本文的其余部分！

进出缓出进出舒适

您的转换代码：

transition: all 1s cubic-bezier(0.2, 0.8, 0.3, 0.7) 0s;

什么时候触发 CSS 转换？#

:focus当用户启动新状态时，即使用或聚焦或悬停在元素上:hover，样式将发生变化。类似地，如果您向添加新样式的 HTML 元素添加带有 Javascript 的新类，则样式也会发生类似的变化。

在这两种情况下，都会触发 CSS 过渡。本质上，当 CSS 元素发生变化时，无论是通过事件还是通过添加类，都会触发转换。

如何使用 CSS 过渡#

可以使用transitionCSS 属性添加 CSS 过渡。通常，我们只使用这个速记属性，可以概括为：

transition: [过渡属性] [过渡持续时间] [过渡定时功能] [过渡延迟]

让我们想想每一个都意味着什么：

transition-property – 这是我们想要转换的属性。它可以设置为所有或任何 CSS 属性，即背景或填充
transition-duration – 这是过渡的长度。它可以设置为一个时间，通常以秒为单位，即5s。
transition-timing-function – 这是计时功能。它通常是一个关键字，可以是ease、linear、ease-in、ease-out或ease-in-out。还有其他的，但我们稍后再看。
过渡延迟– 这是开始时的延迟。如果用户悬停，并且我们将其设置为 0.5 秒，那么悬停效果只会在悬停开始后 0.5 秒开始。

默认情况下，我们只需要给出前两个属性，即下面假设一个缓动计时函数，并且没有延迟：

div {
    transition: background 2s;
}

如前所述，transition 是一种简写形式，以下显示了transition属性的短形式和长形式：

div {
    transition: background 3s ease-in 0.5s;
    /* Equivalent to.. */
    transition-property: background;
    transition-duration: 3s;
    transition-timing-function: ease-in;
    transition-delay: 0.5s;
}

CSS 过渡的示例#

让我们看一下悬停过渡效果。如果您将鼠标悬停在下面的 div 上，您会看到向新样式的缓慢过渡：

div {
    color: white;
    text-decoration: underline;
    font-size: 1.25rem;
    background: transparent;
    padding: 0.25rem;
    box-shadow: none;
    cursor: pointer;
    /* The transition property: */
    transition: all 0.5s ease-out;
}
div:hover {
    padding: 0.5rem;
    background: white;
    color: black;
    box-shadow: 0 2px 25px rgba(255,255,255,0.5);
}

悬停在我身上

其他缓动函数#

我们已经谈到了一些关于缓动函数和我们可以使用的关键字，但这些并不是我们唯一可以使用的。还有一些其他的缓动函数对于创建各种过渡效果非常有用。

三次贝塞尔曲线#

最常用的过渡时间函数之一是三次贝塞尔曲线。一个例子如下所示：

div {
    transition: all 0.5s cubic-bezier(.17,.67,1,-0.52);
}

这使我们可以根据曲线形状来回转换。上面的转换可以在下面看到：

我是一个过渡

如果您想生成自己的三次贝塞尔曲线，您可以通过在线找到的各种工具来完成，或者在编辑过渡属性时通过 Google Chrome 开发工具来完成。

脚步#

较少使用，但同样有用。它将转换分成一组均匀间隔的步骤，在两种状态之间转换时产生一种跳跃效果。

步骤定义为多个步骤和一个关键字。关键字确定跳转是从 CSS 更改的开头开始 ( jump-start) 还是与结尾对齐 ( jump-end) 或两者都对齐 ( jump-both)。

div {
    transition: all 2s step(6, jump-start);
}