CSS参考指南：transition

CSS transition属性是一个速写属性，允许我们在CSS中的设置动画效果。 transition在一定时间范围内逐渐将CSS属性从原始值改变为新值。

CSS属性从一个值变为另一个值是瞬时的，就像突然眨眼，他们将基本上是不可察觉的。 transition允许实现这种变化，使得它可以在人眼可察觉的方式逐渐发生。

示例：

div.banner {
    width: 100px;
    padding: 10px;
    background-color: seagreen;
    border: 1px solid deepskyblue;

    transition: width 2s;
}

div.banner:hover {
    width: 150px;
}

您可以在这里玩一个示例：

见PO
CSS Continitions 按类型David（4] @ Philipz-Aded ）
在 Codepen 。

如上所述，当悬停时，我们将元素的宽度增加到150px。 transition div.banner中设置的属性使得长度的增加在2秒的时间内缓慢渲染。

我们将看到元素的宽度展开至150px，文本缓慢地重新调整自身以补偿宽度增加。 当鼠标远离div.banner元素移动时，再次将其宽度变为100px，并且其文本包装恢复为其原始状态。

让我们看看另一个例子：

div.banner {
    width: 100px;
    padding: 10px;
    background-color: seagreen;
    border: 1px solid;

    transition: background-color 4s ease-in 1s;
}

div.banner:hover {
    background-color: limegreen;
}

您可以在此处使用上面的示例：

看笔
CSS_Transition_Background_Color 通过Chidume David（ @ Philipsz-Davido ）
在 Codepen 。

这里，当用户悬停在div.banner元素上时，过渡延迟为1秒，然后在4秒的时间段内改变为seagreen的原始background-color。 我们看到褪色效果，seagreen颜色逐渐调光，limegreen颜色逐渐推出占据其位置。

请注意，我们使用:hover伪类来触发过渡。 我们可以使用其他方法来触发过渡 - 例如，我们可能会将元素的状态从有效更改为无效，禁用或启用:disabled状态，激活:active状态等

语法

transition属性需要一个空格分隔的值列表：

transition: <property> <duration> <timing-function> <delay>

• <property>是动画的CSS属性，我们希望在属性更改时从其原始值动画到新值
• <duration>是动画将持续的时间段。 我们可以在几秒钟内设置持续时间（s）或毫秒（ms）
• <timing-function>是控制动画速度的方法
• <delay>是过渡之前延迟的时间

在我们之前的例子中：

div.banner {
    ...
    transition: background-color 4s ease-in 1s;
}
...

• background-color是div.banner的CSS属性我们要在属性更改时动画
• 4s是动画的持续时间
• ease-in是时序功能。 这使得效果开始慢，然后加速
• 在它开始之前1s的过渡延迟

多transition

我们可以为transition设置多个属性。 属性必须是逗号分隔的。

transition: background-color 4s ease-in 1s, width 2s;

此处，为transition动画设置了两个属性：background-color和width。 现在，transition侦听何时或全部属性（background-color和width）更改。

组件属性

transition属性是四个长transition特性的速记：

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

transition-property

transition的动画属性。

transition-property: border-radius

将border-radius设置为在ELEMENT中的CSS属性，我们想要在变化时运行过渡效果。

transition-property: margin-right

当元素的右边缘（margin-right）更改时，触发transition。

transition-property限制transition为仅指定的属性，将其余部分更改为瞬间。 可以在分隔的列表中分配给transition-property的多个属性。

考虑以下示例：

transition-property: margin-right, color, border-radius;

此示例仅在其值更改时仅选择右边距，文本颜色和边界半径属性以进行过渡。

transition-property可以采用以下值：

• none：没有选择过渡的财产
• all：为转换选择元素中的所有动画属性

transition-duration

动画的持续时间，或完成它的时间。 该单元可以设置为秒（s）或毫秒（ms）。

transition-duration: 1s

如transition-property，您可以在逗号分隔的列表中提供transition-duration的多个值。

transition-duration: 1s, 200ms;

列表中的每个值分别适用于transition-property中设置的每个值。

transition-property: width, color;
transition-duration: 1s, 200ms;

1s将应用于width属性，200ms将应用于color。 这意味着元素中width属性值的持续时间为1秒，元素中color属性值的转换持续时间为200毫秒。

transition-timing-function

过渡效果，或transition如何发挥作用。 它最终控制过渡的速度。

transition-timing-function可以采用以下值：

• ease
• linear
• ease-in
• ease-out
• ease-inout
• step-start
• step-end
• steps(n, start)，其中n是steps—steps(n, end)的数量
• cubic-bezier(x1, y1, x2, y2)

让我们看看上面的值：

• ease：这使得过渡开始缓慢，然后逐渐加速，然后慢下来，结束
• linear：从开始到结束的过渡速度是相同的; 它是线性的
• ease-in：过渡开始慢，然后加速
• ease-out：过渡开始快速，然后减慢
• ease-in-out：过渡开始缓慢，在中间移动得更快，然后减速，并结束不要太慢

这是一个例子：

transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-in;

如上所述，在width属性变化上触发过渡。 设置为ease-in的transition-timing-function将使宽度更改缓慢并逐渐加速在1秒钟内。

transition-delay

属性状态变化与向新状态的过渡开始之间的时间。 该值在两秒（s）或毫秒（ms）中表示。

transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-in;

transition-delay: 1s;

如上所述，在过渡开始之前，我们设置了1s的延迟。

考虑另一个例子：

transition-property: border-radius;
transition-duration: 2s;
transition-timing-function: ease-in;

transition-delay: 10ms;

这里，当元素的border-radius状态变化时，transition动画将被延迟10ms。

如果此属性具有0s的值，则在目标属性更改状态时，transition将立即启动。