Firefox 4 带来了 CSS3 过渡（从初始值到最终值动画化 CSS 属性的能力）。在 Firefox Aurora 中，我们正在尝试使用 CSS3 动画：一种更强大的方式来使用 CSS 动画化你的内容。

定义动画

第一步是定义要动画化的属性的中介 CSS 值，在规范中称为关键帧。Adobe Flash 制作工具的用户应该熟悉这个概念。

应用动画

虽然过渡在属性值更改时会隐式触发，但动画在应用动画属性时会显式执行。

更多属性

该 规范 定义了其他动画属性，这些属性打开了广泛的可能性

• 使用 animation-timing-function 可以利用缓动使动画更自然（参见下面的演示）
• animation-direction: alternate; 是 CSS3 动画的自动反转。看看它如何用于创建下面的加载器。
• 如果没有 animation-fill-mode: forwards;，属性将在动画结束时恢复到其初始值
• 猜猜设置 animation-play-state 为 paused 会做什么...

演示！

你应该使用 Firefox Aurora、Chrome 或 Safari 5 来查看这些演示。
动画平移

零图像，优雅降级的加载器

一个复杂的动画场景
使用兼容的浏览器查看 Madmanimation，或者观看 动画的截屏。

你已经使用过 CSS3 动画了吗？在下面的评论中告诉我们，或在 Studio 中提交你的演示。