翻訳元: CSS トランジション 101
中国語: CSS3 変換の概要
原作者:ジェイソン・クランフォード・ティーグ
翻訳者:シェン・フェイ
著作権を尊重し、転載する場合は出典を明記してください。よろしくお願いします。
人々は画面上で何らかの変更が加えられることを期待していますが、 CSSとHTML ではページ内での操作にはあまりにも不十分であり、それらをコードに実装する必要があります。
たとえば、リンクはこの色またはその色のいずれかであり、テキスト領域はこの大きさまたはその大きさのいずれかであり、画像はある状態から別の状態に直接変化します。
その結果、ほとんどの Web ページは、要素が厳密に切り替わったり変化したりするだけなので、ある程度固定的になります。
はい、DHTML、jQuery、または独自の JS を作成して過剰に実行することもできますが、これには非常に単純な機能であるべきものを実装するためにより多くのコードが必要になります。
必要なのは、ページに単純なトランジション効果をすばやく簡単に追加する方法です。この記事では、 CSS トランジションとその使用方法に関する役立つ情報を紹介します。
数か月前、私はデザイナーが長い間切望していた基本的な機能を実現するために、新しい CSS 3 テクノロジを使い始めるべきだと提案しました。唯一の問題は、これらのテクノロジが IE8 を含む IE では利用できないことでした。
これらのテクノロジーは 75% のユーザーには見えないと信じている読者もいますが、その見解は信頼できません。
読者の皆さんには、「ちょっと待ってください」と言いたいのは、ほんの数行のコードで任意の要素にクールな変換効果を追加できる別の新しい CSS プロパティをこれから紹介するからです。
CSS 変換は CSS 3 で導入されたばかりですが、Webkit 拡張機能として追加されました。つまり、Apple Safari や Google Chrome などの Webkit ベースのブラウザでのみ使用できるようになりました。ただし、Opera 10.5 プレアルファ版から判断すると、Opera は次の 10.5 で CSS 3 変換をサポートする予定です。したがって、この記事で説明されている実際の効果を確認するには、Chrome または Safari 4 を使用してこの記事を表示することを強くお勧めします。
CSS 変換はどこから来たのでしょうか?変換はかつて Webkit の一部にすぎず、Safari UI では実行でき、他のブラウザでは実行できなかったいくつかの優れた機能の基礎でした。
しかし、W3C CSS Working Group は公式機能に変換を追加することを拒否しており、一部のメンバーは変換は CSS プロパティではなく、スクリプトを通じて処理する方がよいと主張しています。 (自信満々です。前段でも同様の意見があり、ガオガオさんとも議論しました。CSS アニメーションはパフォーマンスの範囲を超えていると思います。インタラクティブなものはスクリプトで実装する必要があります。しかし、後ほど、桂兄弟の導きで、私は新たな理解を得て始めました - シェン・フェイ）
しかし、私を含む多くのデザイナーや開発者は、これらは実際にスタイルであり、私たちが毎日使用する伝統的な静的なスタイルではなく、単なる動的スタイルであると主張します。
幸いなことに、ダイナミックなスタイルに関する議論は過去のものになりました。昨年 3 月、Apple と Mozilla の代表者は、Apple がすでに WebKit に追加したものに非常に近い、 CSS 変換モジュールを CSS 3 機能に追加し始めました。
デザインの強化についての簡単な紹介先に進む前に、これを強調しておきます。スタイルがブラウザーに共通でない (つまり、一般的に使用されるすべてのブラウザーでサポートされている) 場合は、Web サイトの機能をスタイルに依存させないでください。
見逃した人のためにもう一度強調します。スタイルがブラウザー間で共通でない場合は、Web サイトの機能をスタイルに依存させないでください。
ただし、変換などのスタイルをデザインの拡張機能として使用して、スタイルが見えないユーザーの使いやすさを犠牲にすることなく、ユーザー エクスペリエンスを向上させることができます。 CSS 変換なしで機能し、ユーザーがタスクを完了できる場合は問題なく、CSS 変換を使用できます。