CSS3 动画

引言

最近，我参与了一个非常有趣的项目，关于 HTML5，以后会详细介绍。与此同时，我有机会“玩”一下 HTML5 和 CSS3 规范。CSS3 规范中一个新且有趣的部分可能是 CSS3 动画。这些东西是否让你想起动画图像、使用 Flash 或 JavaScript 实现的简单动画？如果是这样，这篇文章就是为你准备的。

为什么使用动画？

如今，大多数网站和应用程序都使用动画。你可以在网站嵌入的营销广告中找到它们，在等待下载完成时看到动画图像，以及在许多其他地方。动画的附加价值在于它能吸引用户的注意力。这也是它的缺点，因为过度使用动画可能会导致分心，并可能将用户从网站或应用程序上引开。过去，如果你想使用动画，可以使用动画图像、Flash 或 JavaScript。今天，有了 HTML5，这不再必要。你可以使用 Canvas、SVG 甚至 CSS 来实现相同的结果。

什么是 CSS3 动画？

CSS3 引入了一个新的 CSS 模块，称为 CSS 动画模块 Level 3。该模块描述了如何使用 CSS3 新属性创建简单的动画。CSS3 动画使用新的 @keyframes 规则定义，该规则定义了动画的帧。结合动画属性，你可以实现仅由样式更改组成的简单动画。

定义动画

为了定义动画，你将使用 @keyframes 规则并为其指定一个有意义的名称。在 @keyframes 块内，你必须为动画指定开始和结束点。使用 0% 或 from 值表示开始点，使用 100% 或 to 值表示结束点。你还可以通过在动画本身中指定它们的百分比来创建帧。这是一个简单的动画定义：

@keyframes changeBackground 
{
   from { background-color: white; }
   50% { background-color: green; }
   to {background-color: white; }
}

这里的动画只是在动画运行期间将背景从白色更改为绿色。你可以使用任何 CSS 属性来创建你的动画。
定义动画是不够的，因为它什么也不做。为了运行动画，你将使用动画属性将其设置为 DOM 元素。

动画属性

规范中指定了一组动画函数，例如 animation-name 和 animation-duration。我更喜欢使用缩写的动画属性，它包括这些函数。动画属性获取 6 个不同的参数，分别是名称、持续时间、时间函数、延迟、迭代计数和方向。如果省略了持续时间，则其默认值为 0，动画将不会运行。此外，如果名称为 ‘none’ 值，则会停止正在运行的动画。这是一个在具有 animatedDiv id 的某个元素上设置动画属性的示例：

#animatedDiv
{
   animation: changeBackground 2s linear 1s infinite alternate;
}

动画将运行之前定义的动画，持续时间为 2 秒，时间函数为线性，延迟为 1 秒，无限次循环，方向为交替。

请注意，大多数浏览器都添加了带有其前缀的 CSS3 动画，因此之前的代码可能无法在所有浏览器中工作。例如，Chrome 使用 @-webkit-keyframes 规则和 –webkit-animation 属性前缀。

摘要

CSS3 动画可以帮助减少动画图像和用于简单动画的插件的使用。它定义了一个简单的动画模型，可以通过使用 @keyframes 规则定义动画并在具有动画属性的元素上使用它们来设置。