この記事では、マルチステップのアニメーションとトランジションを追加するプロセスを説明します。
マルチステップアニメーションとトランジションを使用するにはどうすればよいですか?
マルチステップ アニメーションを作成するには、一連のキーフレームが生成されます。選択した HTML 要素に適用する一連の変更を指定します。各キーフレームはアニメーションの異なる状態を表し、ブラウザはこれらの状態の間で要素をスムーズに遷移させます。遷移中、ユーザーの操作または状態の変化によって、指定された期間にわたる CSS プロパティのスムーズな変化を指定します。
理解を深めるために実際の例を見てみましょう。
例 1: マルチステップ アニメーションの適用
この例では、選択した HTML 要素にマルチステップ アニメーションが適用されます。以下のデモをご覧ください。
< スタイル >
.animationExample {
幅: 130ピクセル;
高さ: 130ピクセル;
背景色: フォレストグリーン;
位置: 相対的;
アニメーション: moveAnimate 4s イーズインアウト無限。
}
< / スタイル >
< 体 >
< ディビジョン クラス = 「アニメーションの例」 >< / ディビジョン >
< / 体 >
上記のコード スニペットでは次のようになります。
- まず、「」という名前のクラス アニメーション例 「」内で「」が選択されています。 <スタイル> ' 鬼ごっこ。
- 次に、「」の値 130ピクセル ” が” に割り当てられます。 身長 ' と ' 幅 ' プロパティ。
- さらに、「」を設定します。 フォレストグリーン ' と ' 相対的 ” の値として 背景色 ' と ' 位置 」プロパティを使用して視覚化を強化します。
- その後、「」を使用します。 アニメーション ” プロパティを作成し、それを “ moveAnimate 4s は無限にイーズインアウト可能 」を選択してアニメーションを適用します。
- 値は 4 つの部分で構成され、最初の部分はカスタム名のアニメーション、2 番目の部分は完了までの時間、3 番目の部分はアニメーションの種類、4 番目の部分はこのアニメーションが適用される回数の制限です。
- 最後に、HTML 要素を作成し、「 アニメーション例 」クラスに。
ここで、「」を使用してください。 キーフレーム 「カスタムを定義するルール」 移動アニメーション化する 』アニメーション：
@ 移動キーフレームをアニメーション化する {0 % {
左： 0 ;
背景色: 青;
}
50 % {
左: 200ピクセル;
背景色: フォレストグリーン;
変換: 回転 ( 180度 ) ;
}
100 % {
左： 0 ;
背景色: 青;
}
}
上記のコード ブロックでは次のようになります。
- まず、「 @キーフレーム ” ブロックが、これから定義するカスタム アニメーションの名前とともに作成されます。
- 次に、「」という名前のブロックを作成します。 0% 」は、アニメーションの開始時に CSS スタイルを適用します。そして「」を活用してください。 背景色 ' と ' 左 」 CSS プロパティ。
- ここで、「」という名前のブロックを作成します。 50% 」をアニメーションの途中でスタイリングします。 「」という価値を提供します。 200ピクセル ”、” フォレストグリーン ' と ' 回転(180度) 」を「left」、「background-color」、「transform」プロパティに追加します。これにより、選択した要素を左に 200 ピクセル回転できるようになります。
上記のコード ブロックをコンパイルした後、次のようになります。
出力には、選択した HTML 要素にマルチステップ アニメーションが適用されたことが示されています。
例 2: マルチステップ遷移の適用
マルチステップトランジションを適用するには、CSS セレクターを「 遷移 ' 財産。以下のコードにアクセスしてください。
.fade {
不透明度: 1;
トランジション: 不透明度 1s;
}
.fade:hover {
不透明度: 0;
}
<
/ スタイル>
<
本体＞
< p クラス = 'フェード' > 私の上にカーソルを置くと、遷移が表示されます。 < / p >
< / 体 >
上記のコードの説明:
- まずはカスタム「 フェード ” クラスが選択され、値 1 が “ 不透明度 ' 財産。また、「」の値を設定します。 不透明度 1s ”へ” 遷移 ” CSS プロパティ。これにより、「」の時間内に不透明度が設定または削除されます。 1秒 ”。
- 次に、「 :ホバー 」セレクターが「」に割り当てられます。 フェード ' クラス。その中で、「 0 ” が不透明度プロパティに設定されます。
- 最終的に、HTML 要素は「」内に作成されます。 <本文> ”タグと”のクラス フェード 』と付いています。
コンパイル フェーズが終了すると、Web ページは次のように表示されます。
GIF には、カスタム フェード トランジションが選択した HTML 要素に適用されたことが表示されます。
結論
マルチステップのアニメーションとトランジションは、動きや視覚効果を追加することで HTML Web ページに命を吹き込みます。アニメーションの場合、「 キーフレーム ” は、” のような継続時間のパーセンテージとともに利用されます。 0% ” がスタートです。” 50% ”はミッド、” 100% 』でアニメーション期間は終了となります。トランジションには、CSS セレクターと「 遷移 ' クラス。この記事では、マルチステップのアニメーションとトランジションを使用するプロセスを説明しました。