- iPadやガジェットの情報を発信。（2020年からブログ運営開始）
- 実務で使えるフロント周りのweb制作技術を発信。
- レメプラで、デジタルプランナーも作っています。
CSS animationプロパティとは？
CSS の animation プロパティは、要素にアニメーション効果を追加するための強力なツールです。
これにより、ウェブページに動きを加え、ユーザー体験を向上させることができます。animation プロパティを使用することで、要素の位置、サイズ、色、透明度などを時間の経過とともに変化させることができます。
CSS animationプロパティの基本的な使用方法
アニメーションの定義
まず、アニメーションを定義するために、@keyframesルールを使用します。@keyframesは、アニメーションの各ステップを定義するために使用されます。
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}キーフレームの設定
キーフレームは、アニメーションの開始から終了までの各ステップを定義します。例えば、以下のようにスライドインアニメーションを定義できます。
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}animationプロパティの詳細
animation-name
アニメーションの名前を指定します。@keyframesで定義した名前を使用します。
animation-name: fadeIn;animation-duration
アニメーションの継続時間を指定します。単位は秒（s）またはミリ秒（ms）です。
animation-duration: 2s;animation-timing-function
アニメーションの進行速度を指定します。例えば、ease、linear、ease-in、ease-out、ease-in-outなどがあります。
animation-timing-function: ease;animation-delay
アニメーションの開始までの遅延時間を指定します。
animation-delay: 1s;animation-iteration-count
アニメーションの繰り返し回数を指定します。infiniteを指定すると無限に繰り返されます。
animation-iteration-count: infinite;animation-direction
アニメーションの再生方向を指定します。normal、reverse、alternate、alternate-reverseがあります。
animation-direction: alternate;animation-fill-mode
アニメーションの終了後の状態を指定します。none、forwards、backwards、bothがあります。
animation-fill-mode: forwards;animation-play-state
アニメーションの再生状態を指定します。runningまたはpausedがあります。
animation-play-state: paused;実際の使用例
シンプルなフェードインアニメーション
以下は、シンプルなフェードインアニメーションの例です。
<div class="fade-in">このテキストがフェードインします。</div>@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in {
animation-name: fadeIn;
animation-duration: 2s;
}スライドインアニメーション
以下は、スライドインアニメーションの例です。
<div class="slide-in">このテキストがフェードインします。</div>@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.slide-in {
animation-name: slideIn;
animation-duration: 1s;
}応用テクニック
応用テクニックでは、複数のアニメーションをご紹介します。
複数のアニメーションの組み合わせ
複数のアニメーションを組み合わせて、より複雑な効果を作成することもできます。
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.combined {
animation: fadeIn 2s ease-in-out, slideIn 1s ease-out;
}アニメーションのパフォーマンス最適化
アニメーションを使用する際には、パフォーマンスにも注意が必要です。
レメディオ以下のポイントを押さえて最適化を行いましょう。
- ハードウェアアクセラレーションを利用する:
transformやopacityなどのプロパティを使用して、GPU によるレンダリングを促進します。 - アニメーションの数を減らす: 同時に実行されるアニメーションの数を減らし、パフォーマンスを向上させます。
- アニメーションの複雑さを減らす: 複雑なアニメーションは避け、シンプルなアニメーションを使用することで、パフォーマンスの低下を防ぎます。
7. まとめと今後の展望
CSS の animation プロパティを使いこなすことで、ウェブデザインに動きを加え、ユーザー体験を向上させることができます。
基本的な使い方から応用テクニックまでをマスターすることで、より魅力的なウェブサイトを作成することができるでしょう。今後も新しいアニメーション技術やトレンドを取り入れ、常に最新のデザインを追求していくことが重要です。
