CSS3のトランジションとアニメーションを使用してUIの変更を強調する方法
デザイナーやアーティストは、自分の作品にレイヤーを追加することを目的として、モーション、エフェクト、さまざまな種類の幻想を試してきた長い歴史を持っています。オプアート運動は1960年代に動きの印象を与えるために目の錯覚を使用し始めました.
それ以来、多次元の動きを使って視聴者の視野を広げる最近人気のあるキネティックアートのように、ますます新しいアプローチがポップアップしています。モーションは1967年に最初の点滅カーソルの発明と共にコンピューター科学にも登場しました.
フロントエンド開発では、CSS要素がリリースされる前にDOM要素は通常JavaScriptでアニメーション化されていましたが、それでも機能する方法ですが、 CSS3によって導入された新しい特性は私達が私達の設計を高めることを可能にします 異なる効果や動きを より直感的な方法で.
CSS3が提供する2つの主なテクニックはトランジションとアニメーションです。この記事では、それらが何であるか、それらの違いは何か、そしてそれらをどのように利用できるかについて見ていきます。.
トランジション
トランジションとアニメーションはどちらも 状態の変化を視覚化する によるHTML要素の 1つ以上のCSSプロパティを変更する.
最も簡単な形式の状態変化の視覚化は、ボタンやリンクの上にマウスを移動したときの色を変更することです。それが起こると、要素はわずかに異なるスタイルを取得します、それは何かがスクリーン上で動いたかのように通常視聴者によって気づかれます.
ホバー（またはフォーカス、クリック）でリンクのCSSプロパティを変更することは、最も古く最も単純な形式のトランジションであり、CSS 3時代以前から存在していました。.
｛色：オレンジ。 a：ホバー色：赤; a：フォーカス色：青; a：訪れた色：緑;
遷移は、HTML要素が事前定義された状態から別の状態に変化したときに使用されます。 CSS 3では、タイミング機能やデュレーション制御など、以前よりも高度な視覚化を可能にする新しいプロパティが導入されました。.
アニメーションの違いを理解した後、次のセクションで新しいCSSプロパティを見ていきます。今のところ、トランジションについて知っておくべき最も重要なことを見てみましょう。.
- 彼らは常に始まりと終わりの状態を持っています.
- 始点と終点の間の状態は、ブラウザによって暗黙的に定義されています。CSSではこれを変更できません。.
- 彼らは必要とします 明示的なトリガ, CSSによる新しい擬似クラス、またはjQueryによる新しいクラスの追加など.
以下に、CSS 3のスマートに活用された遷移の美しい例を見ることができます。そこでは、作者は隠された情報を邪魔にならない方法で明らかにしますが、それでもユーザーは新しいコンテンツに集中します.
アニメーション
より複雑な動きで状態変化を視覚化したい場合、または明示的なトリガーがない場合は、ページがロードされたときにエフェクトを開始したい場合は、アニメーションを使用する方法があります。.
アニメーションは私たち自身の設定や設定によってより複雑なパスを定義することを可能にします キーフレーム. キーフレーム アニメーションの過程における中間点であり、アニメーション要素のスタイルを必要なだけ変更することができます。.
CSS3は洗練されたアニメーションを作成するための素晴らしい方法を提供しますが、トランジションよりもそれらを作成するのは通常難しいです。.
CSS3アニメーションについて知っておくべき最も重要なことは次のとおりです。
- 明示的なトリガーを必要としません。ページのロード時またはブラウザで別のDOMイベントが発生したときに開始できます。
- トランジションが使用される場合、例えば新しいクラスや擬似クラスが追加または削除された場合などに使用できます（使用頻度は低いですが）。
- いくつかのキーフレーム（中間状態）を定義する必要があります。
- これらのキーフレームの数、頻度、スタイルを指定できます。
以下の例では、クールなアニメーションドロップダウンメニューを見ることができます。ボタンをクリックするとアニメーションが始まります。これは、clickイベントが発生したときにjQueryを使用してリスト要素にクラスを追加することによって実現されます。.
これらの新しいクラスは指定されたアニメーションでアニメーション化されています @keyframes CSSファイル内の規則。次回ユーザーがボタンをクリックすると、余分なクラスがjQueryによって削除され、メニューが再び非表示になります。.
CSSのプロパティと @keyframes ルール上
トランジションでは、 遷移 速記プロパティ、または4つの単一遷移関連プロパティ 遷移プロパティ, 遷移期間, 遷移タイミング関数, そして 遷移遅延. 短縮形プロパティには、すべての単一プロパティが省略形で含まれています。.
アニメーションの場合 アニメーション 私たちの手元にある8つ以上の単一のアニメーションプロパティを表す速記プロパティ、すなわち アニメ名, アニメーション期間, アニメーションタイミング機能, アニメーション遅延, アニメーション反復回数, アニメーションの方向, アニメーションフィルモード, そして アニメーション再生状態.
トランジションとアニメーションの両方で最も重要なことは、常に 状態変更中に変更されるCSSプロパティを指定する必要がある. トランジションの場合は、次のようになります。
.要素背景：オレンジ;遷移プロパティ：背景。遷移期間：3秒。遷移タイミング関数：イーズイン。 要素：ホバー背景：赤。
指定した バックグラウンド これは、移行中に変更されるものです。.
1回の遷移で複数のCSSプロパティを変更できます。この場合、上記のコードは次のように変更されます。 遷移プロパティ：背景、境界線。. 私達はまた使用してもいいです 遷移プロパティ：すべて。, 各プロパティを別々に指定したくない場合.
速記を選択できます 遷移 同様に財産。そうする場合、内部プロパティの正しい順序に常に注意を払う必要があります（docsの構文を参照）.
.要素背景：オレンジ;トランジション：背景3秒イーズイン。 要素：ホバー背景：赤。
アニメーションを作成したい場合は、関連を指定する必要があります。 キーフレーム. CSSプロパティは別々に定義されたものに変更する必要があります。 @keyframes ルールで。これが私たちがこれを行う方法の例です。
.要素位置：相対; animation-name：slide;アニメーション期間：3秒。 animation-timing-function：イーズイン。 @keyframesスライド0％left：0; 50％left：200px; 100％left：400px;
上記の例では、非常に単純なスライド効果を作成しました。我々は定義した アニメ名, それから3つのキーフレームをバインドしました。 @keyframesスライド… ルールで。パーセンテージはアニメーションの長さを表しているので、この例では50％が1.5秒で発生します。.
速記を使うことができます アニメーション 同様にプロパティ、またはより単純なものでキーフレームを定義することができます からの 次のようにルールを決めます。
.要素位置：相対;アニメーション：スライド3sイーズイン。 @keyframesスライドからleft：0; からleft：400px;
より複雑なアニメーションを作成することはそれ自体が芸術の形です。興味があれば、高度なマーキーの作成方法とバウンス効果の作成方法に関する2つのアニメーションチュートリアルを読むことができます。.
トランジションやアニメーションを作成するときは、それを知っておく必要があります。 すべてのCSSプロパティをアニメートできるわけではありません, ですから、CSS Animatableで変更したいプロパティをチェックすることは常に良い考えです。.
CSS3のアニメーションとトランジションは長い間ベンダーの接頭辞を使っていましたが、これを使う必要はもうありませんが、Mozilla Developer Networkはまだ追加することを勧めています。 -ウェブキット Webkitベースのブラウザのサポートはごく最近になって安定性が達成されたため.
