CSS 动画

我们又有一个很酷的 CSS 新功能要谈谈：在 CSS 中指定的动画。这方面有很多内容要介绍，所以我们先从基础开始。

我们新增支持的最简单的动画类型叫做过渡（transition）。通常，当 CSS 属性的值发生变化时，渲染结果会立即更新，相关元素会立即从旧的属性值变为新的属性值。过渡则描述了如何在此基础上，在一段时间内从旧状态执行动画到新状态。

过渡通过以下属性指定：

transition-property – 应该进行动画的属性，例如 opacity。
transition-duration – 过渡应持续多长时间。
transition-timing-function – 过渡的时间函数（例如，linear、ease-in 或自定义的 cubic bezier 函数）。
transition – 上述三个属性的简写。

这是一个简单的例子：

div {
  opacity: 1;
  -webkit-transition: opacity 1s linear;
}

div:hover {
  opacity: 0;
}

每个属性都支持逗号分隔的值列表，就像 CSS3 的多背景一样，这允许在单个样式规则中描述不同属性的单独过渡。列表中的每个值都对应于其他属性中相同位置的值。

例如：

div {
  -webkit-transition-property: opacity, left;
  -webkit-transition-duration: 2s, 4s;
}

在上述样式规则中，opacity 将在 2 秒内动画，而 left 将在 4 秒内动画。

一些非常复杂的属性实际上可以动画化。例如，新的 -webkit-transform 属性。这里有一个使用 -webkit-transform 和 -webkit-transition 实现简单旋转效果的例子。

<div style="-webkit-transition: -webkit-transform 3s ease-in" 
  onclick="this.style.webkitTransform='rotate(360deg)'">
This div will do a spin when clicked!
</div>

边框也可以动画化。下面的框有一个简单的边框动画，当鼠标悬停在框上时，边框会增加厚度并改变颜色。

请注意，在悬停示例中，当鼠标移出 div 时，动画将反转。任何时候属性值发生变化，动画都会简单地从当前位置作为起始值、新值作为目标值重新开始。源状态的过渡属性用于确定如何动画到新的目标状态。

关于过渡需要理解的关键点是：
(1) 它们是隐式动画。脚本和样式表可以像往常一样编写，动画会随着属性值的改变而隐式发生。
(2) 它们优雅降级。不支持过渡的浏览器只会不动画，但所有代码和样式规则都可以保持不变。

以下是属性的更详细描述。所有这些属性都可以接受多个逗号分隔的值。

transition-property
值： none | all | <property>
初始值： all
描述： 指定哪个属性触发动画。none 值表示没有过渡。all 值表示每个可动画属性都会触发动画。否则，只有当确切指定的属性值发生变化时，动画才会触发。

transition-duration
值： <time>
初始值 0
描述： 指定过渡应持续多长时间。默认值为 0。

transition-timing-function
值： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)
初始值： ease
描述： transition-timing-function 属性描述动画将如何随时间进行。可以使用关键字表示常用函数，或者提供 cubic bezier 函数的控制点以完全控制过渡函数。要指定一个 cubic bezier 函数，您需要为曲线的 2 个控制点提供 X 和 Y 值。点 P0 隐式设置为 (0,0)，P3 隐式设置为 (1,1)。这 4 个点用于计算一个 cubic bezier 曲线。

时间函数关键字具有以下定义：
linear – 线性函数只返回其接收到的输入作为输出。
defaultease – 默认函数 ease 相当于 cubic-bezier(0.25, 0.1, 0.25, 1.0)。
ease-in – ease-in 函数相当于 cubic-bezier(0.42, 0, 1.0, 1.0)。
ease-out – ease-out 函数相当于 cubic-bezier(0, 0, 0.58, 1.0)。
ease-in-out – ease-in-out 函数相当于 cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier – 指定一个 cubic-bezier 曲线，其 P0 和 P3 点分别为 (0,0) 和 (1,1)。这四个值将曲线的 P1 和 P2 点指定为 (x1, y1, x2, y2)。

在未来的文章中，我将更详细地介绍过渡，并讨论我们正在添加的另一个功能：显式动画。我们还在准备一个更详细的提案（充满了令人生畏的规范语言），涵盖了我们对变换、动画和其他高级视觉效果的思考。

[2008 年 12 月 1 日 – 更新了时间函数值以反映新的实现。'default' 现已称为 'ease'。有关详细信息，请参阅 CSS 过渡规范。]