CSS Easing模块中linear关键字的定义演进

在CSS动画和过渡效果中，缓动函数(easing function)控制着动画随时间变化的速率。CSS Easing模块定义了多种缓动函数，其中最基本的就是线性(linear)缓动。本文将探讨CSS Easing Level 1和Level 2规范中对linear关键字定义的变化及其技术背景。

linear关键字的本质

在CSS Easing Level 1规范中，linear被描述为一个"线性缓动函数"，这种表述容易引起混淆。实际上，linear是一个CSS关键字，而非函数调用(因为它没有使用括号语法)。这个关键字代表最简单的缓动效果——动画以恒定速度进行，输入进度和输出进度始终保持1:1的线性关系。

规范演进中的定义调整

CSS Easing Level 2规范对linear关键字的定义更加精确，明确指出它是一个关键字，而非函数。这个关键字会产生一个具有两个控制点的线性缓动函数：

• 起点：[输入0，输出0]
• 终点：[输入1，输出1]

Level 2还完整定义了真正的线性缓动函数linear()，包括其语法、序列化规则等细节。相比之下，Level 1中的定义显得不够严谨，既提到了"函数"又指出它实际上是关键字。

技术实现考量

虽然linear关键字和linear(0,1)函数调用在视觉效果上是等价的，但它们在序列化行为上有重要区别：

1. linear关键字始终序列化为"linear"
2. linear(0,1)函数会序列化为"linear(0 0%, 1 100%)"

这种区别保持了向后兼容性，同时也为新的函数语法提供了明确的序列化规则。

规范写作风格的思考

在规范编写过程中，存在两种主要风格：

1. 面向人类的描述：使用自然语言解释概念和行为
2. 算法式描述：使用类似伪代码的步骤定义行为

CSS Easing Level 2采用了更多算法式描述，虽然精确但可读性有所降低。理想的规范应该在这两种风格间取得平衡，既保证精确性又便于理解。

总结

CSS规范在不断演进过程中，对概念的定义会越来越精确。linear关键字从Level 1到Level 2的定义变化，反映了规范作者对概念清晰度和精确性的追求。理解这些定义差异有助于开发者更准确地使用CSS动画特性，也为实现CSS引擎提供了明确的指导。