作者：正如我们之前解释的，Mozilla 现在对我们的 Beta 计划进行更频繁的更新。因此，它来了，Firefox Beta 2 刚刚发布，在 Beta 1 发布 3 周后。
Firefox 4 Beta 1 已经带来了大量的新功能（查看 Beta 1 功能列表）。那么，这个 Beta 版本对于 Web 开发人员有什么新内容呢？
性能和 CSS3 过渡效果
此版本中 Web 开发人员的两个主要功能是**性能改进和 CSS3 变换上的 CSS3 过渡效果**。
此视频由 YouTube 托管，如果您已启用 HTML5 视频标签，则可以使用它（请参阅此处）。YouTube 视频此处。
**性能：**在此新的 Beta 版本中，Firefox 带来了新的页面构建机制：保留图层。此机制可为具有动态内容的网页提供明显更快的速度，并且滚动更加流畅。此外，我们仍在试验硬件加速：使用 GPU 渲染和构建网页的某些部分。
**变换上的 CSS3 过渡效果：**Web 开发人员的主要变化可能是 CSS3 变换上的 CSS3 过渡效果。
CSS3 过渡效果提供了一种为 CSS 属性更改设置动画的方法，而不是立即生效。有关详细信息，请参阅文档。
此功能在 Firefox 4 Beta 1 中可用，但在此新 Beta 版本中，您可以在变换上使用过渡效果。
CSS3 变换允许您在任何 HTML 元素上定义变换（缩放、平移、倾斜）。您可以使用过渡效果为该变换设置动画。
transform: rotate(5deg); 将通过平滑动画转换为 transform: rotate(350deg) scale(1.4) rotate(-30deg);。#victim {
background-color: yellow;
color: black;
transition-duration: 1s;
transform: rotate(10deg);
/* Prefixes */
-moz-transition-duration: 1s;
-moz-transform: rotate(5deg);
-webkit-transition-duration: 1s;
-webkit-transform: rotate(10deg);
-o-transition-duration: 1s;
-o-transform: rotate(10deg);
}
#victim:hover {
background-color: red;
color: white;
transform: rotate(350deg) scale(1.4) rotate(-30deg);
/* Prefixes */
-moz-transform: rotate(350deg) scale(1.4) rotate(-30deg);
-webkit-transform: rotate(350deg) scale(1.4) rotate(-30deg);
-o-transform: rotate(350deg) scale(1.4) rotate(-30deg);
}
基于 WebKit 的浏览器（Safari 和 Chrome）、Opera 和 Firefox 现在也支持 CSS3 过渡效果。降级（如果不受支持）是平滑的（没有动画，但样式仍然应用）。因此，您可以立即开始使用它。
演示
我编写了一些演示来展示变换上的 CSS3 过渡效果和硬件加速（请参阅上面的视频以获取屏幕截图）。
此演示显示了 5 个视频。这些视频在缩略图中为黑白颜色（使用 SVG 滤镜），而在实际大小下为彩色（单击它们）。“旋转”效果是使用 CSS 过渡效果完成的。将鼠标悬停在视频上，您将看到一个问号（？）按钮。单击它以查看有关视频的详细信息并查看应用的另一个 SVG 滤镜（feGaussianBlur）。
此页面显示了 2 个视频。左上方的视频是一个圆形视频（感谢 SVG 剪辑路径），带有 SVG 控件。主视频是可点击的（放大视频）。视频顶部的文本也可点击，以便使用 CSS 过渡效果将其发送到背景中。
此页面是图像、视频和画布元素的简单列表。单击某个元素将对页面本身应用 CSS 变换，并带有过渡效果。白色元素是可点击的（播放视频或显示 WebGL 对象）。我建议您使用硬件加速和WebGL 兼容的浏览器。对于 Windows 上的 Firefox，您应该启用 Direct2D。鸣谢
创意共享视频
- Ian Broyles
- Spoony Mushroom
- Mark Sebastian：[1] [2]
- Swanky
- Spiral Production
多色云彩效果（MIT 许可证）
关于Paul Rouget
Paul 是一位 Firefox 开发人员。
61 条评论