CSS を使用してフェードアウト遷移を実装する
- CSS フェードトランジション
- Animation プロパティを使用したフェードアウト
- Transition プロパティを使用したフェードアウト
- インライン CSS を使用したフェードアウト
- 外部 CSS を使用したフェードアウト
- Dom イベントを使用したフェードアウト
この記事では、フェードアウト アニメーションと、内部、外部、およびインライン CSS を使用してそれを実装する方法について学習します。 後で、DOM イベントを使用してフェードアウト機能を実装する方法を見ていきます。
CSS フェードトランジション
CSS フェード トランジションは、画像、テキスト、背景などの要素がページ上で徐々に表示または非表示になる視覚効果です。
CSS transition プロパティまたは animation プロパティのいずれかを使用して、これらの効果を生成します。 transition プロパティを使用すると、開始状態と最終状態のみを指定できます。
CSS トランジションとアニメーションの違いは、トランジションにはユーザーが要素にカーソルを合わせるなどのトリガーが必要ですが、アニメーションには必要ないことです。 ページが読み込まれると、アニメーションの既定の動作がすぐにシーケンスを開始します。
ただし、animation-delay パラメーターを使用して遅延させることができます。 この記事は、FadeOut のみに焦点を当てています。
CSS を使用してフェードアウト遷移を実現する方法を見てみましょう。
Animation プロパティを使用したフェードアウト
前述のように、fadeOut 機能は、CSS の transition プロパティと animation プロパティの両方で実現できます。 animation プロパティを使用して機能を作成することから始めましょう。
コード：
<html>
<head>
<style>
.fade {
animation: fadeOut 5s;
}
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
</style>
</head>
<body>
<div class="fade"> Internal CSS Fade Out using Animation !</div>
</body>
</html>
まず、クラス fade を div に割り当てます。 すべてのスタイリングはこのクラスで行われます。
style タグに向かいます。 このクラスで最初に呼び出すプロパティは animation: fadeOut 5s で、このプロパティを使用すると、Web ページでクリエイティブなアニメーションを作成できます。
fadeOut はアニメーションの名前で、5s はアニメーションがサイクルを完了するのにかかる時間を定義するアニメーションの長さです。 次に、アニメーション名 fadeOut にキーフレームを使用しました。
キーフレームは、アニメーション ルールを決定するために使用されます。 CSS の opacity プロパティの値の範囲が 0 から 1 であるため、要素の不透明度/透明度が 0% で 100% を意味し、不透明度が 100% でテキストを意味する 0 になることを指定しています。 完全な可視性で表示され、ゆっくりとフェードアウトします。
Transition プロパティを使用したフェードアウト
CSS の transition プロパティを使用して機能を実装しましょう。 transition プロパティが機能するには、ホバー、フォーカスなどのトリガー機能が必要です。
コード：
<html>
<head>
<style>
.fadeOut:hover {
opacity: 10%;
transition: opacity 3s;
}
}
</style>
</head>
<body>
<div class="fadeOut"> Internal CSS Fade Out using Transition !</div>
</body>
</html>
上記のコードでは、transition: opacity 3s と記述しています。 transition の最初のサブプロパティは transition-property で、トランジションが適用される CSS プロパティの名前を指定します。
2 番目のサブプロパティは transition-duration で、トランジションが発生する期間を指定します。 したがって、ユーザーがテキストにカーソルを置いたときに、テキストの不透明度が指定された期間で 10% になる必要があると言っているだけです。
インライン CSS を使用したフェードアウト
インライン CSS は、タグ内の HTML 要素にスタイルを与えます。 HTML タグ内のすべてのプロパティを使用できないため、インライン CSS はお勧めしません。
コード：
<html>
<head>
<style>
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
</style>
</head>
<body>
<div class="fade" style="animation: fadeOut 5s"> In-line CSS Fade Out !</div>
</body>
</html>
インライン CSS を使用してコードを記述しているため、ここで問題になるのは、div タグ内にキーフレームを記述しなかった理由です。 キーフレームは HTML 要素の一部ではないため、アニメーションで呼び出されます。
外部 CSS を使用したフェードアウト
外部スタイル シートは、拡張子 .css を持つ独立したファイルで作成されます。 外部スタイル シートは CSS ルールのリストであり、HTML タグは使用できません。
外部スタイル シートは、HTML ページの head タグに配置される link タグによってリンクできます。 1つの HTML ページで、好きなだけ外部スタイル シートを利用できます。
たとえば、style.css または任意の名前でファイルを作成し、上記の例のスタイル タグ コードをファイルにコピーします。 CSS ファイル参照を HTML ページに追加する必要があります。
コード：
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="fade">External CSS Fade Out !</div>
</body>
</html>
Dom イベントを使用したフェードアウト
フェードアウト機能を実現するもう 1つの方法は、DOM onMouseOver および onMouseOut イベントを使用することです。 onMouseOver イベントは、マウス ポインターが要素上に移動したときにトリガーされ、onMouseOut イベントは、マウスが要素から離れたときに発生します。
コード：
<html>
<head></head>
<body>
<div class="fadeOut" onMouseOver="this.style.opacity='10%'"onMouseOut="this.style.opacity='100%'">
I will fade out on mouse hover
</div>
</body>
</html>
onMouseOver イベントの不透明度を 10% に設定します。 要素を完全にフェードアウトし、不透明度を 0 に設定するとします。
出力に見られるように、カーソルが上に来るとテキストがフェードアウトし、カーソルを取り除くと元の位置に戻ります。