CSS过渡使我们可以动画化CSS属性从一个值到另一个值的过渡。我们可以使用过渡CSS属性之一指定CSS过渡：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay
• transition

" transition"属性是前四个过渡属性的简写。

CSS过渡示例

这是一个CSS转换示例：

<style>
    #theButton{
        background-color: #6666ff;
        transition-property: background-color;
        transition-duration: 2s;
    }
    #theButton:hover {
        background-color: #ff0000;
    }
</style>
<button id="theButton">Hover over me</button>

这是应用了这些样式的按钮：

悬停在我身上

请注意，将鼠标悬停在按钮上时，按钮的背景颜色如何从蓝色逐渐变为红色。

CSS过渡是双向的

如果我们看一下前面的示例，我们将看到背景颜色过渡是双向的。当鼠标进入按钮区域时，背景颜色逐渐变为红色。当鼠标离开按钮时，背景色会慢慢变回蓝色。

这种过渡是双向的，原因是该示例将过渡声明为按钮核心样式的一部分(通过始终应用的CSS规则)。如果相反，我们已将过渡CSS属性移至"#button1：hover"部分，则当鼠标进入按钮时仍将应用过渡，因为这会触发"#button1：hover"部分。但是，当鼠标再次离开按钮时，将不会应用过渡。这是CSS转换代码的外观：

<style>
    #theButton{
        background-color: #6666ff;
    }
    #theButton:hover {
        background-color: #ff0000;
        transition-property: background-color;
        transition-duration: 2s;
    }
</style>
<button id="theButton">Hover over me</button>

这是一个应用了上述样式的按钮：

悬停在我身上

请注意，当鼠标悬停在按钮上时，背景颜色如何平滑地过渡为红色，但是当鼠标离开按钮时，背景颜色会立即变回蓝色。这是因为当鼠标没有悬停在按钮上时，不再有过渡CSS属性将按钮作为目标，因此不会应用过渡。

过渡财产

transition-propertyCSS属性指定了将要应用过渡的CSS属性。并非所有CSS属性都可以转换。通常，可以转换数值属性(例如，宽度和高度)和颜色属性。这是一个CSStransition-property示例：

<style>
    #theButton{
        background-color: #6666ff;
        transition-property: background-color;
    }
</style>

注意如何将"过渡属性"设置为"背景颜色"。这意味着，每当某些CSS规则更改" background-color" CSS属性时，都会应用过渡。

过渡持续时间

transition-durationCSS属性指定过渡应花费的时间。通常，我们将以秒(例如2s)或者毫秒(例如250ms)为单位指定持续时间，这是CSS" transition-duration"示例：

<style>
    #theButton{
        background-color: #6666ff;
        transition-property: background-color;
        transition-duration: 2s ;
    }
</style>

本示例为背景颜色过渡设置了2秒的持续时间。

过渡计时功能

transition-timingCSS属性指定过渡的发生方式。我们可以使用以下预定义的计时功能之一：

• linear
• ease
• ease-in
• ease-out
• ease-in-out

默认值为ease。

定时函数" linear"创建了一个从起点到终点线性变化的过渡。在整个过渡过程中，过渡速度是相同的。

" ease"和" ease-in-out"过渡计时功能以较低的过渡速度开始，然后加快过渡速度。在过渡即将结束时，速度再次降低。 ease的加速和减速比ease-in-out的加速和减速快，但是基本原理是相同的。

"缓入"过渡计时功能可缓慢开始过渡，然后加快速度。一旦达到最大过渡速度，它将保持该速度直到过渡结束。在过渡期结束之前，不会放慢脚步。

"渐出"过渡计时功能以最大速度开始过渡，然后在过渡结束时减慢速度。

当我们将鼠标悬停在按钮上时，以下5个按钮会更改其宽度。每个按钮都使用上述转换定时功能之一。将鼠标悬停在按钮上可以查看过渡计时功能的工作方式。

线性缓入缓入缓入缓入

" cubiz-bezier"过渡计时功能需要更深入的说明。如果我们不熟悉三次贝塞尔曲线，我将在我的SVG路径教程中对其进行解释。

三次贝塞尔曲线具有两个控制点，它们控制曲线的斜率。该图显示了三次贝塞尔曲线，其中有两个控制点位于曲线中。

当用作计时函数时，三次贝塞尔曲线在逻辑点0,0和1,1之间延伸。用作过渡时间函数时，曲线的X和Y值与绘制曲线时具有不同的含义。

X值是过渡的时间。因此，当X为0时，它是在过渡持续时间的开始；当X为1时，它是在过渡持续时间的结束。

Y值是要转换的CSS属性的值。因此，当Y为0时，过渡属性值具有其起始值；当Y为1时，过渡属性具有其终止值。 Y值越接近0，过渡的CSS属性值就越接近其起始值。 Y值越接近1，转换后的CSS属性值将越接近其最终值。

由于时间是线性增长的，因此浏览器还将通过曲线线性增长X值。随着时间的流逝(因此X也会流逝)，浏览器将为每个X值计算曲线上的相应Y值。所得的Y值确定转换后的CSS属性值在其开始值和结束值之间的距离。该图从上方获取曲线，并向其添加时序信息：

该图从上方获取了曲线，并添加了三条线。这些线分别标记了过渡持续时间的25％，50％和75％。这些线使想像三次贝塞尔曲线过渡定时函数的工作变得容易一些。每条线在曲线上对应的Y值(曲线与线相交)表示过渡的CSS属性值在其开始值和结束值之间的距离。

如果沿X轴线性移动，我们会看到Y值在开始时增加更快，然后放慢一点，然后在曲线的末端再次增加得更快。因此，此曲线将创建一个过渡，该过渡开始得更快，然后变慢，然后在过渡结束时再次加快。

将三次贝塞尔曲线指定为定时函数时，仅指定控制点。起点始终为0,0，终点始终为1,1. 这是三次贝塞尔曲线过渡定时函数示例：

<style>
    #theButton{
        width: 200px;
        transition-property: width;
        transition-duration: 2s;
        transition-timing-function: cubic-bezier(0.9, 0.1, 0.1, 0.8);
    }
</style>

本示例声明了具有两个控制点(0.9，0.1)和(0.1，0.8)的三次贝塞尔曲线。

这是一些带有相应CSS代码的三次贝塞尔曲线，以及一个根据每条三次贝塞尔曲线改变其宽度的按钮。这应该使我们了解三次贝塞尔曲线定时功能的工作原理。

<style>
    #theButton{
        width: 200px;
        transition-property: width;
        transition-duration: 2s;
        transition-timing-function: cubic-bezier(0.1, 0.5, 0.9, 0.5);
    }
    #theButton:hover {
        width: 300px;
    }
</style>

立方贝塞尔曲线(0.1，0.5，0.9，0.5)

<style>
    #theButton{
        width: 200px;
        transition-property: width;
        transition-duration: 2s;
        transition-timing-function: cubic-bezier(0.5, 0.1, 0.5, 0.9);
    }
    #theButton:hover {
        width: 300px;
    }
</style>

cube-bezier(0.5，0.1，0.5，0.9)transition-delayCSS属性设置过渡开始之前延迟过渡的时间段。我们通常以秒(例如0.5s)或者毫秒(例如250ms)为单位设置时间。这是一个CSStransition-delay示例：

过渡延迟

本示例将" transition-delay"设置为250毫秒，这意味着过渡将在250毫秒的延迟后开始。

<style>
    #theButton{
        width: 200px;
        transition-property: width;
        transition-duration: 2s;
        transition-delay: 250ms;
    }
    #theButton:hover {
        width: 300px;
    }
</style>

" transition" CSS属性是" transition-property"，" transition-duration"，" transition-timing-function"和" transition-delay" CSS属性的简写形式。 " transition" CSS属性采用空格分隔的这四个CSS属性的值。这是一个CSStransition的例子：

过渡

本示例使用过渡计时函数ease定义了CSS属性width的过渡，过渡时间为2秒，延迟为250毫秒。

<style>
    #theButton{
        width: 200px;
        transition: width  2s  ease  250ms;
    }
    #theButton:hover {
        width: 300px;
    }
</style>

我们可能已经知道，除非某些事件触发了该转换，否则任何转换都不会开始。过渡通常是通过将CSS属性应用于过渡目标HTML元素来触发的。

CSS过渡触发器

当鼠标悬停在HTML元素上，鼠标离开等时，CSS属性值可能发生更改。这些事件称为"转换触发器"。我们已经在本文前面看到了：hover触发器的示例。

我们还可以通过JavaScript触发CSS属性值的更改。我们可以直接在HTML元素上设置新的CSS属性值，也可以在其上设置包含新CSS属性值的新CSS类。

这是通过JavaScript在HTML元素上设置CSS属性的方法：

这是通过JavaScript在HTML元素上设置新CSS类名称的方法：

document.getElementById("theButton").style["background-color"] = "#ff00ff";

请记住，我们可以在字符串中添加更多CSS类名称。只需将它们隔开一个空格即可。

document.getElementById("theButton").className = "newClass";