原文: Firefox 4 Beta 2 is here – Welcome CSS3 transitions (2010/07/27 公開)

以前お伝えしたように、Firefox 4 ではベータ版の更新が従来より頻繁に行われるようになりました。その結果、Beta 1 の公開からわずか 3 週間で Beta 2 が公開されました。

Beta 1 には既に多くの新機能が含まれていました (Beta 1 の機能一覧)。今回の新しいベータ版には、どのような Web 開発者向け新機能があるのでしょうか？

パフォーマンスと CSS3 トランジション

Beta 2 で追加された主な Web 開発者向け機能は、パフォーマンスの向上と CSS3 トランスフォーム内の CSS3 トランジションの 2 つです。

上の動画は YouTube でホストされています。HTML5 の video タグが有効な場合は、それが使用されます (詳細はこちらをご覧ください)。YouTube 動画は こちら でご覧いただけます。

パフォーマンス: この新しいベータ版では、新しいページ構築メカニズムとして Retained Layers (留保レイヤー) が導入されています。このメカニズムが有効になっていると、動的コンテンツが含まれる Web ページの表示速度が大幅に向上し、スクロールも相当スムーズになります。また、GPU を使用して Web ページの一部のレンダリングと構築を行うハードウェアアクセラレーションも引き続き実装を進めています。

CSS3 トランスフォーム内トランジション: Web 開発者にとって最も大きな変更は、おそらく CSS3 トランスフォーム内の CSS3 トランジションでしょう。

CSS3 トランジションを使用すると、CSS プロパティの変更をすぐに適用する代わりに、アニメーションできるようになります。詳細については こちらのドキュメント をご覧ください。

この機能は Beta 1 で既に使用可能でしたが、Beta 2 ではトランスフォームの中でトランジションを使用できます。

CSS3 トランスフォームでは、あらゆる HTML 要素に対してトランスフォーム (拡大縮小、移動、歪み) を定義できます。また、トランジションを使用してこれらのトランスフォームをアニメーションできます。

#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);
}

CSS3 トランジションには、WebKit ベースのブラウザ (Safari および Chrome)、Opera、そして現在では Firefox が対応しています。対応していないブラウザでも表示には影響ありません (アニメーションはしませんが、スタイルは適用されます)。つまり、今すぐ使い始めることが可能なのです。

デモ

トランスフォーム中の CSS3 トランジションと、ハードウェアアクセラレーションをお見せする 2 つのデモを作成しました (スクリーンキャストについては、上の動画をご覧ください)。

このデモには 5 つの動画があります。動画は、サムネイル内では白黒表示 (SVG フィルタを使用)、実サイズになると (クリックされると) カラー表示になります。CSS トランジションにより「渦巻き」効果が適用されます。動画の上にマウスを乗せると、クエスチョンマーク (？) のボタンが現れます。それをクリックすると動画の詳細が表示され、別の SVG フィルタ (feGaussianBlur) が適用されます。

このページには 2 つの動画があります。左上の動画は SVG コントロール付きの円形の動画 (SVG クリップパスを使用) です。メインの動画はクリックできます (動画が拡大されます)。動画に重なっている文字もクリックでき、クリックすると、CSS トランジションを使用して動画の裏側に移動できます。

このページは、画像、video、canvas 要素のシンプルな一覧です。それらをクリックすると、トランジションとともに CSS トランスフォームがページ自体に適用されます。白い要素はクリックできます (動画を再生するか、WebGL オブジェクトを表示します)。ハードウェアアクセラレーションと WebGL に対応したブラウザを使って見ることお勧めします。Windows で Firefox をお使いの場合は、Direct2D を有効にする必要があります。

クレジット

Creative Commons の動画

• Ian Broyles
• Spoony Mushroom
• Mark Sebastian：[1] [2]
• Swanky
• Spiral Production

マルチカラー・クラウド効果 (MIT ライセンス)

• Professor Cloud