CSSを使ったアニメーションを実装したい！animationプロパティを解説

「JavaScript」を使わなくても「CSS」だけでアニメーションを実装することが可能です。本記事では、「CSS」を使ったアニメーションを実装する2つの方法と、そのプロパティの種類を解説します。初心者から経験豊富な開発者まで、より効率的で効果的なWebデザインが可能になるため、ぜひ参考にしてください。

CSSを使ったアニメーションを実装するプロパティ

Webデザインにおいてアニメーションを取り入れることは、ユーザー体験を高める重要な要素です。アニメーションの実装方法として、「CSS」は最適な手段となり得ます。ここでは、「CSS」を用いたアニメーションを実装するための基本的なプロパティを解説します。

• transitionプロパティ
• animationプロパティ

これら2つのプロパティを理解し効果的に使用することで、アニメーションによる動的なWebページを簡単に作成することが可能です。

transitionプロパティ

「transition」プロパティを使用することで、「CSS」でのスタイル変更がスムーズになります。

基本的に何も設定しない状態で「CSS」でスタイルを変更すると、すぐに変更後のスタイルが反映されます。しかし、瞬間的な切り替えはユーザーに違和感を与えることがあるため、解決策として「transition」を使用するのです。

「transition」プロパティを使用すると、指定した時間にスタイルの変更がおこなわれ、変更の過程は滑らかに見えます。より自然な動きとなるため、ユーザーはサイトやアプリケーションに対する信頼性や使いやすさを感じ、全体的なユーザー体験の向上が期待できるでしょう。

animationプロパティ

「animation」プロパティは、「CSS」で複雑なアニメーションを実装する際に有用です。

「animation」プロパティを使用することで、アニメーションの一連の変化を途切れることなく表示させるアニメーションが作成できます。さらに、アニメーションの各段階の動きやタイミング・繰り返し回数などを細かくカスタマイズすることが可能です。

注目すべきは「animation」のプロパティを用いる場合、アニメーションを動作させるための外部のきっかけです。たとえば、マウスホバーなどが必要ない場合がある点です。ユーザーが何も操作しなくてもページを訪れた瞬間からアニメーションをスタートさせることができます。

CSSを使ったアニメーションの作り方

「CSS」を使ってアニメーションを実装する方法は多く、それぞれの方法には特有の利点と用途があります。ここからは、一般的に多用される2つの方法を用いたアニメーションの実装方法を解説します。

• transitionで実装する方法
• animationで実装する方法

これらの手法を使えば、瞬間的なスタイル変更から複雑なアニメーションまで、さまざまな表現が可能です。

transitionで実装する方法

「transition」プロパティを用いると、短いコードでアニメーションを簡単に実装が可能です。「transition」プロパティで、特定の「CSS」プロパティの変化を時間的に滑らかにします。

たとえば、div要素の背景色を変えるには以下のようにCSSを設定します。

div {
  background-color: blue;
  transition: background-color 2s;
}
div:hover {
  background-color: red;
}

上記のコードでは、マウスホバーで背景色が青から赤へと2秒かけて変化し、時間はs（秒）またはms（ミリ秒）で指定可能です。

短いコードで効果的なアニメーションが実装できるため、ユーザー体験も向上します。

animationで実装する方法

「animation」プロパティを用いた場合、具体的なアニメーション動作は「@keyframes」で定義します。初めにアニメーションを適用したい要素に「animation」プロパティを指定します。その後、動作の詳細を「@keyframes」内で設定するのが一般的な手順です。

例として、次のようなコードで要素が右に移動するアニメーションを実装できます。ただし、この例では要素に`position: relative;`や`position: absolute;`などのポジション値が設定されていることを前提としています。

@keyframes moveRight {
  from { left: 0px; }
  to { left: 200px; }
}

div {
　position: relative;
  animation: moveRight 4s linear;
}

「animation」と「@keyframes」を一緒に使用することで、より複雑で滑らかなアニメーションの作成が可能です。「animation」と「@keyframes」の両方を必ずセットで指定しなければいけない点は、注意が必要です。

CSSのアニメーションのanimationプロパティの種類

「CSS」においてアニメーションを制御するために、多くのプロパティが用意されています。ここでは、主要な「animation」関連のプロパティについて詳しく解説します。

1. animation-name
2. animation-iteration-count
3. animation-timing-function
4. animation-duration
5. animation-delay
6. animation-fill-mode
7. animation-direction
8. animation-play-state
9. animation

これらのプロパティをマスターすることで、「CSS」のアニメーションを高度に制御できるようになるでしょう。

animation-name

「animation-name」プロパティは「CSS」のアニメーションに名前を割り当て、その名前を「@keyframes」で定義されたアニメーションと関連付ける役割を果たします。

名前は任意で設定できますが、そのアニメーションが何をするのかがすぐにわかる名前をつけることで、後のメンテナンスが容易です。

たとえば、ボタンがクリックされたときに回転するアニメーションには、「rotateOnClick」といった名前をつけることで、どのような動きをするか想像がつきます。このように具体的な名前を使用することで、他の開発者がコードを読んだ際にも、どのような動きが意図されているのかが理解しやすくなるでしょう。

「animation-name」は、コードの可読性と維持性を高めるための非常に便利なプロパティといえます。

animation-iteration-count

「animation-iteration-count」は「CSS」アニメーションにおいて、何回繰り返されるかを指定するプロパティです。「animation-iteration-count」プロパティによって、デザインに動きを加える際の細かな調整が可能です。

具体的には、「animation-iteration-count」プロパティに数値を直接指定することで、アニメーションがその回数だけ繰り返されます。たとえば値に「3」を設定すれば、アニメーションは3回繰り返されます。

一方で「infinite」という値を指定することで、アニメーションは無限に繰り返すことが可能です。「infinite」はローディングアイコンが回り続ける場合などに使用されます。

animation-timing-function

「animation-timing-function」は、アニメーションの加速度やイージング（緩速度）を指定するプロパティです。「animation-timing-function」プロパティの指定により、アニメーションが自然な動きを持ちます。

指定できる値には「linear」「ease」「ease-in」「ease-out」「ease-in-out」などがあります。

「linear」を指定すると、一定の速度でアニメーションの実行が可能です。「ease-in」を指定すると、アニメーションの開始時にゆっくりと動き、終了時に速くなります。各アニメーションがどのような印象を持つのかを、微細にコントロールできます。

animation-duration

「animation-duration」プロパティは、「CSS」アニメーションにおいて、全体の実行時間を指定するための重要な要素です。

「animation-duration」プロパティによって、アニメーションの流れや速度が決まり、単位には秒（s）とミリ秒（ms）を使用できます。たとえば、「2s」は2秒、「1500ms」は1.5秒と解釈されます。

また、小数点以下での時間指定も可能で、より詳細な時間設定がおこなえます。「2.5s」で2.5秒、あるいは「1250ms」で1.25秒といった具体的な設定が可能です。

animation-delay

「animation-delay」プロパティは、アニメーションが開始されるまでの待機時間を設定するためのプロパティです。「animation-delay」プロパティを用いることで、ページ読み込み後すぐにアニメーションが開始されるのを避けたり、複数のアニメーションを時差で起動させたりできます。

単位には、秒（s）とミリ秒（ms）があります。たとえば「2s」は2秒待機、「500ms」は0.5秒待機という具体的な設定が可能です。

とくに複数のアニメーション要素がある場合、それぞれに「animation-delay」を設定することで、より複雑で魅力的なアニメーション表現が実現できます。

animation-fill-mode

「animation-fill-mode」プロパティは、CSSアニメーションが実行される前後にどのようなスタイルが適用されるかを制御します。「animation-fill-mode」プロパティには4つの設定値があります。

1. 「none」: 元のスタイルがそのまま維持されます。
2. 「forwards」: アニメーションが終わったタイミングの「CSS」スタイルを維持します。
3. 「backwards」: アニメーションが開始される前に、アニメーションの最初のフレームスタイルを適用します。
4. 「both」: 「forwards」と「backwards」の両方が適用され、アニメーション前後のスタイルが適切に管理されます。

これらの設定を適切に利用することで、アニメーションの状態遷移をより自然で効果的な制御が可能です。

animation-direction

「animation-direction」プロパティは、アニメーションが再生される方向を定義します。主な値は、以下の通りです。

1. 「normal」: アニメーションは0％から100％へ通常通り進行します。
2. 「reverse」: 100％から0％に逆方向に再生されるため、アニメーションの動きが反転します。
3. 「alternate」: 0％から100％に再生されたあと、100％から0％に再生されます。この設定により、動きが途切れることなくスムーズに続きます。
4. 「alternate-reverse」:「alternate」とは逆に、最初に100％から0％へ再生され、次に0％から100％へ再生される動作をします。

選択した方向によって、ユーザー体験が大きく変わる場合もあるため、設定を慎重に選んでください。

animation-play-state

「animation-play-state」は、アニメーションが動いている状態を制御するプロパティです。「animation-play-state」プロパティには、2つの値があります。

1. 「running」: この初期値を指定すると、アニメーションが再生されます。多くの場合、これがデフォルトの動作となります。
2. 「paused」: この値を使うと、アニメーションは一時停止します。

このプロパティは、ユーザーがページをスクロールしたときや特定の操作をおこなったときにアニメーションを一時停止させるなど、動的なインタラクション（相互作用）が求められる場合に有用です。途中で停止させた状態から再び「running」に戻すこともできるため、ユーザー体験において柔軟なアニメーション制御がおこなえます。

animation

「animation」プロパティは、複数のアニメーションにかかわるプロパティを一括で指定する際に使用されます。「animation」プロパティを使用することで、複数のアニメーション設定を簡潔にまとめて指定できます。

とくに注意すべき点は、「animation-duration」と「animation-delay」の順序です。どちらも時間を指定するものですが、「animation」プロパティ内での指定順によって、先に指定された時間が「animation-duration」（アニメーションの長さ）として解釈されます。そして、次に指定された時間が「animation-delay」（アニメーションの開始までの遅延）として解釈されます。

その他のアニメーション関連のプロパティは、順不同で指定可能です。

CSSのアニメーションのtransitionプロパティの種類

「CSS」のアニメーションは、Webページに動きと魅力を加える重要な要素です。とくに「transition」プロパティは、アニメーションの変化を滑らかに表現するための基本的なツールです。ここからは、4つのプロパティの種類と使用方法について詳しく解説します。

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

これらのプロパティを組み合わせることで、より高度なアニメーションを制作することが可能になります。

transition-property

「transition-property」は、「CSS」のトランジション（変化・効果）を適用する対象のプロパティを指定するためのキーワードです。

「transition-property」プロパティを使用することで、「width」や「height」「opacity」など、特定の「CSS」プロパティだけにトランジションを適用することが可能です。デフォルトの値は「all」で、これを指定すると、その要素に設定されているすべての「CSS」プロパティにトランジションが適用されます。

見た目を調整するために特定のプロパティだけを対象にする場合も多いため、「transition-property」はトランジションの対象範囲を細かく制御する際に重要なプロパティとなります。

transition-duration

「transition-duration」プロパティは、「CSS」のトランジションにおいてアニメーションの継続時間を指定するために使用されます。「transition-duration」プロパティによって、何秒かかってプロパティの値が変化するかを制御できます。

デフォルトの値は「0s」なので0秒です。つまり、アニメーションなしで瞬時にプロパティの変更が反映されることを意味します。時間の単位としては「s」（秒）または「ms」（ミリ秒）が用いられ、「2s」や「500ms」といった形で指定します。

この値を調整することで、アニメーションのスムーズさや視覚的なインパクトを制御することが可能です。

transition-timing-function

「transition-timing-function」は、トランジション（変化・効果）においてアニメーションの速度変化（イージング）を制御するプロパティです。

「transition-timing-function」プロパティにより、アニメーションの進行が一定速度か始めや終わりに加速・減速するかなどを指定できます。デフォルトの値は「ease」で、これはアニメーションがゆっくり始まり、中間で速度が上がり、最後に再びゆっくりと終わるという効果を持ちます。

カスタムの速度曲線を生成するために、「cubic-bezier()」関数を使用することも可能です。

transition-delay

「transition-delay」は、トランジションにおいてアニメーションが始まるまでの時間を調整するプロパティです。

「transition-delay」プロパティによって、ページの要素が一定の時間後にアニメーションを開始するように設定できます。デフォルトの値は「0s」（0秒）で、トランジションが遅延なしで即座に開始されるという意味です。

「transition-delay」プロパティは、アニメーションを順序立てて実行したり、特定のユーザーインタラクションに反応して遅延を設定したりするなど、多くの用途で活用されます。

CSSを活用してフェードインのアニメーションを挿入してみよう

「CSS」を使って右からフェードインするアニメーションを作成する方法は、比較的容易です。まず、対象となるHTML要素に対して、基本的なスタイリングを適用します。たとえば、以下のように「.fade-in-element」というクラスを作ります。

.fade-in-element {
  opacity: 0;
  position: relative;
  left: -100px;
  transition: opacity 2s, left 2s;
}

この設定により、要素は不透明度が0（完全に透明）になり、さらに左に100px移動して非表示になります。

次に、アニメーションをトリガーするための新しいクラスを作成しましょう。

.fade-in-active {
  opacity: 1;
  left: 0;
}

この「.fade-in-active」クラスを「JavaScript」やユーザーのアクションをトリガーとして動的に要素に追加することで、アニメーションが開始されます。opacityとleftプロパティが変わるため、定義したtransitionによって2秒かけて右からフェードインするアニメーションが完成します。

CSSのフェードイン作成に役立つおすすめジェネレーター3選

「CSS」のフェードインアニメーションを手軽に作成できるジェネレーターは、コーディングの効率を高めるだけでなく初心者にも非常に親切です。ジェネレーターは無料でアクセスでき、簡単な操作を目的とするフェードインエフェクトの「CSS」コードを生成できます。

ここからは、「CSS」のフェードイン作成でとくに役立つおすすめのジェネレーターを3つ紹介します。

CSS3 Animation Generator

「CSS」のフェードイン作成ツールといえば、「CSS3 Animation Generator」です。オンラインジェネレーターは多くのアニメーションオプションを提供しており、とくにフェードインエフェクトに関しては非常に高度なカスタマイズが可能です。

多機能性とユーザーが使いやすいインターフェースが特徴で、初心者からプロフェッショナルまで幅広く支持されています。

とくに注目すべき点は、リアルタイムのプレビュー機能です。設定を変更するごとに、すぐにその変更がどのように表示されるのか確認できます。そのため、イテレーションのスピードが大幅に向上し、効率的に作業を進められるでしょう。

またこのジェネレーターで作成したコードは、多くのブラウザと互換性があり、レスポンシブデザインにも容易に対応できます。

Stylie

「CSS」アニメーション作成に特化したオンラインツールのひとつが「Stylie」です。「Stylie」は、非常に直感的に利用をおこなえるツールです。

Stylieの主な特徴は複数のアニメーションプロパティを同時に制御できる点にあり、フェードインを含む複雑なアニメーションも短時間で作成できます。

Stylieのユーザーインターフェースは、ドラッグ&ドロップによる視覚的な操作が可能で、プロパティの微調整も簡単におこなえます。これは、とくに「CSS」アニメーションの作成が初めての方にとって非常に便利です。

生成される「CSS」コードはW3C標準に準拠しており、主要なブラウザで問題なく動作します。また、出力されるコードは非常にシンプルで可読性が高く、手動での編集や他のプロジェクトへの適用も容易です。

CSS Generator

「CSS Generator」は、フェードインアニメーションをはじめとする多くの「CSS」プロパティを簡単に生成できるオンラインツールです。「CSS Generator」は直感的なインターフェースを備えており、コーディング経験が少ない人でも短時間で高品質の「CSS」コードを作成できます。

とくにフェードインのようなアニメーション作成において、「CSS Generator」はテンプレートを多数提供しています。テンプレートを利用することで、複雑なパラメータを一から設定する手間を省き、効率的に作業を進めることが可能です。

また「CSS Generator」ではリアルタイムのプレビュー機能も搭載されているため、コードを生成しながら動作を確認できます。これは、とくに微調整が必要な場合に便利です。

CSSのアニメーションを使いこなせるようになろう

本記事では、「CSS」を用いてアニメーションを実装する際の基本的なプロパティと活用方法を詳しく解説しました。各プロパティの特性を理解し適切に組み合わせることで、より高度なアニメーションも手軽に作成できます。これから「CSS」アニメーションの実装を検討している方は、本記事を参考に自分だけのオリジナルアニメーションを作成してみてください。