知っておくべきCSS3アニメーションテクニック

翻訳: 知っておくべきCSS3アニメーション技術

翻訳元: 動作 CSS について知っておくべきこと

転載の際は著作権を尊重し、当サイトへのリンクを明記してください。

翻訳序文: この記事は Smashingmagazine から翻訳されたものですが、原文の内容は少し浅く、あまり完全ではありません。Front-end Observation は翻訳を前提として体系的な内容を追加しています。不足等ありましたら修正・追加をお願い致します。

Web が進化し、ブラウザーがより高度なコードをレンダリングする能力を向上させるにつれて、私たちはすべてのプラットフォームとブラウザーでこれを達成する予定です。ボックス モデルが IE6 で正常に表示されることを確認するのに費やす時間を短縮できるだけでなく、イノベーションを促進し、ハッキングを回避し、フロントエンド スクリプトを強調する雰囲気を作り出すこともできます。

インターネットは素晴らしい環境であり、豊富な知識を共有できる協力的なコミュニティです。私たちは丸い角を望み、それを実現しました。 複数の背景画像を望み、それを実現しました。 境界線の画像も必要でした。したがって、需要が問題になることはありません。そうでない場合は、依然としてテーブルを使用してページをレイアウトし、過剰なコードを使用する可能性があります。インターネットがあれば何でもできることは誰もが知っています。

インターネットのために生まれた

border-radius 、 box-shadow 、 text-shadowなどの CSS 3 プロパティは、Webkit (Safari、Chrome など) や Gecko (Firefox) などの高度なブラウザーで勢いを増し始めています。これら (これらの CSS プロパティ) は、ユーザーにとって軽量なページとより豊かなエクスペリエンスをすでに作成しており、正常に機能を低下させます。ただし、これらは CSS 3 でできることのほんの一部にすぎません。

この記事では、さらに一歩進んで、変換、トランジション、アニメーションなどのより高度な CSS3 テクニックを見ていきます。コード自体、ブラウザーのサポート、およびこれらの新しいプロパティがデザインと全体的なユーザー エクスペリエンスの両方をどのように改善できるかを適切に示すいくつかの例について説明します。

CSS変換

CSS 変換は W3C ドラフトです。しかし、いくつかのことを学ぶために最初に座ってすべての機能を読んだとき、それは私を啓発しませんでした。ご想像のとおり、このドキュメントは専門用語で書かれており、変形されたグラフィック (つまりプロット) 要素と行列に重点を置いています。微積分を一年生で受講して以来、行列に触れていなかったため、この章では古き良きブラウザのテストと推測と確認を何度も行う必要がありました。

見つけることができるすべてのチュートリアルを読み、多くのブラウザー テストを行った結果、誰もが恩恵を受けることができる CSS 変換に関する有益な情報をいくつか思いつきました。

変身

変換属性は、SVG で実装できるのと同じ機能の一部を実装します。インライン要素とブロック要素で使用できます。たった 1 行の CSS コードで、要素の回転、拡大縮小、移動が可能になります。

一部の前衛的なデザインに対する最大の批判は、テキストが選択できないことです (テキストを選択するには、画像を切り取る必要があります)。これは純粋な CSS メソッドであり、要素内のテキストはオプションのままであるため、transform 属性を使用してテキストを制御することに習熟すると、これは問題ではなくなります。これは、画像 (または背景画像) を使用する場合に比べて、CSS の大きな利点です。

楽しくて便利なモーフィング機能:

回転させる

Rotate では、度単位の値を渡すことでオブジェクトを回転できます。

規模

Scale は、任意の要素を大きくできるスケーリング関数です。引数として正と負の数値、および小数を受け取ります。

翻訳する

Translate は X 座標と Y 座標に基づいて要素を再配置します

スキュー

スキューとは名前の通りオブジェクトを傾けることで、パラメータはその度合いです。

マトリックス

変換は、X 座標と Y 座標に基づいて要素を再配置する行列変換をサポートします。

それぞれの機能を詳しく見てみましょう。

回転

変換属性には多くの用途がありますが、そのうちの 1 つは変換 (回転) です。 Translate は角度に基づいてオブジェクトを回転し、インライン要素とブロックレベルの要素に使用できます。

IE8 (非標準モード) では、「filter」の代わりに「-ms-filter」と記述する必要があることに注意してください。

ブラウザのサポート

ブラウザの翻訳サポートは驚くほど広範囲にわたっています。上記の CSS スニペットでは、-webkit- および -moz- 接頭辞を追加し、#nav 要素を -90 度回転するだけです。

とてもシンプルですよね？唯一の問題は、かなり重要なデザイン要素について、IE がサポートしていない場合、多くのデザイナーが IE を使用することに消極的になることです。

幸いなことに、IE にはこのためのフィルター、グラフィックス回転フィルターがあります。 4 つの回転値 (0、1、2、3) を持つことができます。 Webkit や Gecko と同じ詳細な制御はできませんが、少なくともある程度の一貫性はあります (IE6 であっても)。このフィルターは 4 つの値しかサポートしていないため、IE では少し役に立たないように思えますが、何もしないよりはマシです。

規模

スケールは思ったように機能しません。単に要素を縮小したり拡大したりするだけです。ズーム関数は幅と高さの両方の値を取り、正、負、または 10 進数を指定できます。

正の値を指定すると、ご想像のとおり、指定された幅と高さに基づいて要素が拡大されます。

負の値は要素を縮小しませんが、要素を反転し (たとえば、テキストが反転します)、それに応じて拡大/縮小します。ただし、1 未満の 10 進数 (例: .5) を使用して要素を縮小または縮小することができます。

ブラウザのサポート

現在、scale 属性は Firefox、Safari、Chrome でのみサポートされており、これまでのところ、これをサポートする IE バージョンはありません。オブジェクトのスケーリングは、非常に意味のある設計上の選択です。これはプログレッシブ エンハンスメント:ホバー経由で使用でき、ナビゲーションに少し興味を加えることができます。