CSS 动画

WebKit 现在支持 CSS 中的显式动画。作为过渡（transitions）的对应物，动画（animations）提供了一种完全在 CSS 中使用关键帧（keyframes）声明重复动画效果的方法。

使用最新的 nightly build，你可以查看上述动画的实际效果。

让我们看看如何使用 CSS 动画，从一个弹跳盒子的例子开始。

在最新的 WebKit nightly build 中查看此示例的实际效果。

指定动画很简单。你首先使用 @-webkit-keyframes 规则描述动画效果。

@-webkit-keyframes bounce {
 from {
   left: 0px;
 }
 to {
   left: 200px;
 }
}

一个 @-webkit-keyframes 块包含称为关键帧（keyframes）的规则集。关键帧定义了动画中该时刻将应用的样式。动画引擎将在关键帧之间平滑地插值样式。在上面的示例中，我们定义了一个名为“bounce”的动画，它有两个关键帧：一个用于动画的开始（“from”块），另一个用于动画的结束（“to”块）。

定义动画后，我们使用 -webkit-animation-name 和相关属性来应用它。

div {
 -webkit-animation-name: bounce;
 -webkit-animation-duration: 4s;
 -webkit-animation-iteration-count: 10;
 -webkit-animation-direction: alternate;
}

上述规则附加了“bounce”动画，将其持续时间设置为 4 秒，使其总共执行 10 次，并且每隔一次迭代反向播放。

现在，假设你想像 1995 年一样狂欢，并创建自己的超级闪烁样式。在这种情况下，我们指定一个包含多个关键帧的动画，每个关键帧具有不同的不透明度、背景颜色和变换值。

@-webkit-keyframes pulse {
 0% {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
 33% {
   background-color: blue;
   opacity: 0.75;
   -webkit-transform: scale(1.1) rotate(-5deg);
 }
 67% {
   background-color: green;
   opacity: 0.5;
   -webkit-transform: scale(1.1) rotate(5deg);
 }
 100% {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
}

.pulsedbox {
 -webkit-animation-name: pulse;
 -webkit-animation-duration: 4s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease-in-out;
}

同样，在最新的 WebKit nightly build 中查看此示例的实际效果。

关键帧使用百分比值指定，定义了关键帧在动画持续时间内的快照时刻。“from”和“to”关键字分别等同于“0%”和“100%”。

CSS 动画是 WebKit 项目提出的一项 CSS 增强功能，我们称之为 CSS 特效（例如渐变、遮罩、过渡）。其目标是提供属性，使 Web 开发人员能够创建图形丰富的 H5 内容。在许多情况下，动画是表现性的，因此属于样式系统。这允许开发人员为动画编写声明性规则，取代了 JavaScript 中大量难以维护的动画代码。

另一个好消息是，iPhone 2.0 上的 WebKit 已经支持 CSS 动画（以及 CSS 变换和 CSS 过渡）。iPhone 上的实现已针对该平台进行了优化，因此您将获得出色的性能。结合动画、过渡和变换可以实现一些非常令人印象深刻的内容。

我们正在webkit.org 上记录这些增强功能，并向标准机构提交规范。请注意，由于它们目前是 WebKit 特有的功能，因此它们使用 -webkit- 前缀实现，尽管规范中不使用该前缀。

您可以在 Apple 的Web 应用程序开发者中心找到更多示例。

和往常一样，请在评论中留下反馈，并在http://bugs.webkit.org/提交错误。