Firefox 5 上周发布了。此版本附带了CSS3 动画。 这里 是由Anthony Calzadilla 制作的演示。

为了说明你能用 CSS3 动画实现什么，我们一直在与Anthony Calzadilla（@acalzadilla）合作开发演示，他以其惊人的动画项目而闻名。

查看Mozilla Demo Studio 上的演示.

它在 Firefox Mobile 上也适用

整个动画是在 CSS 中编排的（关键帧），移动是动画化的转换（转换）。图像嵌套在 div 中。如果你转换了一个 div 并旋转了其子元素，则这些转换会合并。如果你激活了调试模式，你可以看到元素正在转换（边界框）。

#arm-rt {
  /* ARM  SLIDING OUT FROM BODY */
  transform-origin: 0 50%;
  /* The syntax is:
   animation: name duration timing-function delay count direction
  */
  animation: arm-rt-action-01 60s ease-out 10s 1 both;
}
@keyframes arm-rt-action-01 {
  /* This part of the animation starts after 10s and lasts for 60s */
  0% { transform : translate(-100px,0) rotate(0deg); }
  5% { transform : translate(0,0) rotate(0deg); }
  6% { transform : translate(0,0) rotate(-16deg); }
  21% { transform : translate(0,0) rotate(-16deg); }
  22% { transform : translate(-100px,0) rotate(0deg); }
  100% { transform : translate(-100px,0) rotate(0deg); }
}

提示： 如果你想避免一些性能问题，我们建议你使用位图图像。SVG 图像可能会使动画变得有点卡顿。

想要看到更多 CSS3 动画？查看 Anthony 的网站：www.anthonycalzadilla.com。并随时向Mozilla Demo Studio 提交你的 CSS3 动画演示。