CSS 过渡

在最简单的层面上，可以将其想象为传统的 :hover 状态，当光标移到链接上时，您可能会更改链接的外观

a:link {
    color: hsl(36,50%,50%);
}
a:hover {
    color: hsl(36,100%,50%);
}

这会创建一个二元动画；当鼠标悬停在链接上时，链接会从暗淡的橙色变为浓郁的橙色。

然而，transition 属性功能强大得多，它允许平滑的动画（而不是从一个状态跳转到另一个状态）。它是一个简写属性，结合了以下属性（如果您愿意，也可以单独使用这些属性）：

• transition-property：哪个属性（或属性）将进行过渡。
• transition-duration：过渡需要多长时间。
• transition-timing-function：过渡是匀速进行，还是会加速和减速。
• transition-delay：等待多长时间后过渡才会发生。

回到简写属性，如果过渡的应用方式如下…

a:link {
    transition: all .5s linear 0;
    color: hsl(36,50%,50%);
}
a:hover {
    color: hsl(36,100%,50%);
}

…当鼠标悬停在链接上时，颜色将逐渐变化，而不是突然切换。这里的 transition 属性表示它希望所有属性在半秒内以线性方式过渡，没有延迟。

定位特定属性

虽然可以在 transition-property（或 transition）中使用“all”，但您可以通过简单地输入要更改的属性名称来告诉浏览器只过渡某些属性。因此，前面的示例实际上可以包含 transition: color .5s ease 0，因为只有颜色会改变。

如果要定位多个属性（不使用“all”），可以在 transition-property 中提供一个逗号分隔的列表

a:link {
    transition: .5s;
    transition-property: color, font-size;
...

或者，您可以像这样提供一组规则来过渡每个属性

a:link {
    transition: color .5s, font-size 2s;
...

缓动

好的，所以 transition-timing-function（真好记！）是最不显眼的家伙。它有效地说明了浏览器应该如何处理过渡的中间状态。

它遵循三次贝塞尔曲线。是的。显然，我们从小学就知道这一切，但归根结底，在最基本层面，您可以使用 ease 或 linear。

ease 会在过渡开始时产生逐渐的加速，在过渡结束时产生逐渐的减速。linear 在整个过程中保持恒定的速度。其他值包括 ease-in 和 ease-out。