过渡

[xiongshj]

过渡

这是学习《CSS 权威指南》第 17 章的笔记。

CSS 过渡

CSS 过渡能控制一段时间内属性的值如何变成另一个值。

如果浏览器不支持 CSS 过渡相关的属性，变化立即完成，而不逐渐过渡，对最终结果完全没有影响。同样，如果属性或提供给属性的值不支持动画，变化也立即完成，而不逐渐过渡。

定义过渡的属性

在 CSS 中，过渡使用四个属性定义：transition-property、transition-duration、transition-timing-function 和 transition-delay。此外，还有个简写属性 transition，可一次声明全部四个属性。

transition-property 属性

transition-property 属性指定想应用过渡效果的 CSS 属性名称。这样便可以限定只在特定的属性上应用过渡效果，而其他属性值的变化则瞬间完成。

transition-property 属性的值是以逗号分隔的属性列表；或者是 none，表示不过渡任何属性；还可以是默认值 all，即“过渡所有支持动画的属性”。以逗号分隔的属性列表中也可以包含关键字 all。

如果只有关键字 all，或者默认为 all，那么所有支持动画的属性将一起过渡。

默认情况下没有过渡效果，然后如果设置了过渡，而后又想在特定的情况下撤销过渡效果，可以使用 transition-property: none' 覆盖整个过渡声明，禁用所有属性的过渡效果。

none 关键字只能作为该属性的唯一一个值，不能放在以逗号分隔的一组值中。

过渡结束后都会触发 transitionend 事件。

transition-duration 属性

设置过渡持续时间使用 transition-duration 属性，这个属性的值是以逗号分隔的时间长度列表，单位为秒（s）或毫秒（ms）。默认为 0s。

如果两个状态声明的 transition-duration 值不一样，过渡的持续时间为目标状态声明的 transition-duration 值。

transition-duration 属性的值是正数，规范要求必须带时间单位，就算设为零秒，也要写成 0s。

如果声明的属性数量与持续时间的数量不一致，根据各浏览器制定的规则处理。如果持续时间的数量比属性多，忽略多出的持续时间。如果属性的数量比持续时间多，重复使用前面的持续时间。

如果恰好声明两个持续时间，奇数位上的属性使用第一个持续时间，偶数位上的属性使用第二个持续时间。

一般来说，持续时间在 100 到 200 毫秒之间的过渡效果最好，用户能看到动画过程，而且不至于分散注意力。

transition-timing-function 属性

transition-timing-function 属性用于控制过渡的步调，初始值是 ease。

transition-timing-function 属性可以取的值有 ease、linear、ease-in、ease-out、ease-in-out、step-start、step-end、steps(n, start)（n 是步进的次数）、steps(n, end) 和 cubic-bezier(x1, y1, x2, y2)。

transition-delay 属性

transition-delay 属性在元素上发生触发过渡的变化与开始过渡之间引入一定的延迟。

把 transition-delay 设为 0s（默认值），过渡立即开始，即一旦元素的状态发生变化就开始过渡。

有趣的是，transition-delay 属性的值可以是负数。此时，如果 transition-delay 的绝对值比 transition-duration 的值小，从中间某个位置立即开始过渡；如果 transition-delay 的绝对值大于或等于 transition-duration 的值，属性的值瞬间变化，就像没有应用 transition 属性一样，因此也就不触发 transitionend 事件。

transition 简写属性

transition 属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 四个属性的合并简写形式。初始值是 all 0s ease 0s。

transition 属性中唯有 transition-duration 部分是真正必须的，其他部分省略的话都取默认值。持续时间必须在延迟时间之前。

小结

浏览器对过渡的支持极好。

过渡算是一种渐进增强。

加油呀。