transition

transition 属性是用于设置以下属性的缩写属性：transition-property，transition-duration，transition-timing-function 和 transition-delay。

transition 属性中的属性的顺序很重要，并且应当与上述的顺序相同。可以解析为时间的第一个值被分配给转换持续时间，可以解析为时间的第二个值被分配给转换延迟。

如果指定多个 transition，并且任何 transition 没有作为 transition-property，则声明无效。

CSS Transitions 允许 CSS 值中的属性更改在指定的持续时间内平滑地发生。在一个元素上定义一个转换，以平滑地对元素的某些属性上的值的变化进行动画化，而不是突然地改变值。transition 用于帮助提示用户正在发生变化，从而允许用户知道变化发生的内容和方式。 它们用于平滑网页和应用程序中的某些互动，从而获得更好的和更有意义的用户体验。

---

transition-property

transition-property 属性用于指定要应用转换的属性的名称。

你可以指定一个属性名称，逗号分隔的属性名称列表，或使用关键字 all 指示元素上的所有属性都要转换。如果您不想将任何转换应用于任何元素的属性，您可以提供关键字none。

当你提供逗号分隔的属性名称列表时，此列表通常映射到其他过渡相关属性提供的值列表，即 transition-delay，transition-timing-function 和 transition-duration 属性。这些属性中的每个值列表都被视为类似数组，其中值列表中的每个值都有自己的索引。然后，值列表中的每个值都将映射到其对应的值，在其他属性中提供的列表中具有相同的索引。因此，当你提供逗号分隔的属性名称列表时，如果列表包含浏览器无法识别或不可动画（可转换）的属性，则必须将这些属性保留在列表中以保留索引的匹配。

如果一个属性在 transition-property 的值中指定了多次（通过它自己的，通过包含它的速记，或者通过全部值），那么开始的转换使用 duration，delay 和 timing 函数在索引对应于 transition-property 的值中最后一个项目，它调用该属性的动画。

在转换缩写属性中指定 transition-property 值通常更方便。

以下是一些代码示例：

transition-property: color;
transition-property: background-color;
transition-property: left, top;
transition-property: transform, color, background-color;
transition-property: letter-spacing, font-size, line-height; 

---

transition-duration

transition-duration 属性用于指定转换动画应采用多长时间。

也就是说，它用于确定从旧值到新值的转换所需的时间量。

时间以秒或毫秒为单位指定，并且初始设置为“0s”，这意味着到新值的转换是即时的（即不会有动画）。

以下是一些代码示例：

transition-duration: 1s;
transition-duration: .3s;
transition-duration: .6s, 1.5s, 2s;
transition-duration: .3s, .6s, .9s;

---

transition-timing-function

transition-timing-function 属性用于指定定义一个对象从一个值转换到另一个值的时间的速度的定时函数。

它描述了一个过渡将如何在其持续时间的一个周期内进行，从而允许它在其过程中改变速度。

CSS 中的定时函数描述了如何计算转换期间的中间值，并且通常在 CSS 中称为缓动函数。

转换定时函数将定时函数用作值，该值是指定对象从一个值到另一个值转变的随时间的速度的数学函数。 它还可以使用用于公共定时功能的若干预定义关键字中的一个来定义。

如果你还记得我们前面所讲的 ease、ease-in、ease-out 和 linear 的话，这里和那里是一样的，如果不记得，那就再回顾回顾。

---

transition-delay

transition-delay 属性用于指定在过渡效果动画之前等待的时间量。

同样的，和我讲的 animation 的是一样的。所以，原谅我有点累了，不想再重复了。