CSS keyframes animation CSSだけでアニメーションをつける方法

CSS

【keyframes animation】CSSでアニメーションする方法

2022年9月6日

今回はCSSだけでアニメーションを実装することができるCSSのkeyframesとanimationプロパティの使い方を紹介していきます。

CSSで簡単なアニメーションはtransitionでも実装できますが、keyframesとanimationを利用すると、より多様なアニメーションが実装できます。

(参考)【CSSでアニメーション】transitionプロパティの使い方

 

 

CSSのkeyframesとanimationとは?両者の役割

keyframesとanimationプロパティはセットで使用され、CSSだけで様々なアニメーションを実装することができます。

なお、それぞれの役割については以下の通り。

keyframesとanimationの役割を解説した図

keyframes どのように変化させるかといった「アニメーション動作」を設定する
animationプロパティ アニメーション動作にかかる時間や回数などを設定する

keyframesでは「どういったアニメーション変化をさせたいか」を設定し、animationプロパティを使って「そのアニメーション動作にかかる時間や回数など」を設定することができます。

 

上の例では、keyframesを使って「不透明度が0の状態から1.0の状態に変化させる」というアニメーション動作を、animationを使って3.0秒間のうちに行うようにしています。

 

 

keyframesとanimationを使ってアニメーションを実装する方法

keyframesとanimationプロパティの役割の違いが分かったところで、次に実際にこれらを使ってアニメーションを作る方法について解説します。

keyframesとanimationを使ってアニメーションを実装する手順は以下の2ステップです。

■keyframesとanimationを使ってアニメーションを実装する手順

  • (STEP. 1) keyframesを使ってアニメーション動作を設定する
  • (STEP. 2) animationを使ってアニメーション動作にかかる時間や回数などを設定する

なお、今回は以下のように車のイラストを準備しました。

keyframesとanimationの解説用デモ

これを最終的には以下のように、左側から右側に移動するといったアニメーションを実装していきたいと思います。

使用する画像は何でも良いので、各自で準備頂けたらOKです。

 

(STEP. 1) keyframesを使ってアニメーション動作を設定する

それではまずSTEP.1では、keyframesを使って「どのように変化させるか?」といったアニメーション動作を設定していきましょう。

keyframesでは「@keyframes」と書いた後に半角スペースをあけ、任意のキーフレーム名を記述し、0%{}と書かれた{}の中には「アニメーション再生時のCSS」、100%{}と書かれた{}の中には「アニメーション終了地点でのCSS」を記述します。

keyframesの書き方

今回の場合であれば、左から右側に車が移動するアニメーションを作りたいので、キーフレーム名を「lefttoright」とし、以下のように記述すればOKです。

これでアニメーション動作の設定をすることができました。

■(参考)この後animationプロパティを設定すると以下のような動作になります(keyframeだけではまだ動きません)

また今回は必要ありませんが、0%(始点)と100%(終点)の間には必要に応じて1%〜99%などの中間点を追加することも可能。

こちらを追加してあげると、より複雑な動きをするアニメーションの実装も可能です。

■(参考)この後animationプロパティを設定すると以下のような動作になります(keyframeだけではまだ動きません)

0%と100%は「from」と「to」に書き換えることが可能です。

 

(STEP. 2) animationを使ってアニメーション動作にかかる時間や回数などを設定する

keyframesの設定が終わったら、次にanimationプロパティを使ってアニメーション動作にかかる時間や回数などを設定しましょう。

animationプロパティは以下8つのプロパティを同時に指定できる一括指定プロパティです。

animationプロパティで指定できる8つのプロパティの意味

animation-name(必須) キーフレーム名を指定する
animation-duration(必須) アニメーションにかける時間を指定する
animation-timing-function アニメーションの進行ペースを指定する
animation-delay アニメーションを開始させるタイミングを指定する
animation-iteration-count アニメーションの繰り返し回数を指定する
animation-direction アニメーションを再生させる方向を指定する
animation-fill-mode アニメーション前後のスタイルを指定する
animation-play-state アニメーションが実行中か停止中かを指定する

そのため8つ全ての値を指定したい場合は、以下のようにそれぞれの値の間に半角スペースを開けて記述してあげることで、全てのプロパティを指定することができます。

 
指定するプロパティの順番は基本的には順不同です。

ただし1点だけ注意が必要で、animation-durationとanimation-delayの両方を指定する場合は、1つ目の値が「animation-duration」、2つ目の値が「animation-delay」の指定となります

以下では1つ1つのプロパティで使用できる値などを詳しく見ていきます。

 

animation-name:キーフレーム名を指定する(必須)

animation-nameプロパティの値には、keyframesで設定したキーフレーム名を指定します。

今回の場合は、「lefttoright」という名前をつけたので、こちらを設定してあげればOKです。

なおこのままではまだanimation-durationを指定していないため、アニメーションは動作しません。

animation-duration:アニメーションにかける時間を指定する(必須)

animation-durationプロパティの値には、アニメーションにかける時間を「1.0s」「2.0s」のような形で指定します。

上の例では「1.0s」と指定しているため、keyframesで指定したアニメーション動作が1秒かけて行われます。

animation-timing-function:アニメーションの進行ペースを指定する(任意)

animation-timing-functionプロパティでは、アニメーションの進行ペースを指定します。

このプロパティでよく使用される値は以下の通り。

ease(初期値) アニメーションの中央に向けて変化量が増加し、最後に向けて減速する

※cubic-bezier(0.25, 0.1, 0.25, 1.0)と同じ

linear 最初から最後まで等しい速度でアニメーションが変化する

※cubic-bezier(0.0, 0.0, 1.0, 1.0)と同じ

ease-in アニメーションがゆっくり始まり、最後まで加速しながら続く

※cubic-bezier(0.42, 0, 1.0, 1.0)と同じ

ease-out アニメーションが速く始まり、最後まで減速しながら続く

※cubic-bezier(0, 0, 0.58, 1.0) と同じ

ease-in-out アニメーションがゆっくり始まり、速度を上げ、また速度を落とす

※cubic-bezier(0.42, 0, 0.58, 1.0)と同じ

cubic-bazzier(数値, 数値, 数値, 数値) ユーザー定義の2次元ベジェ曲線で、進行ペースを独自にカスタマイズすることができる

また「cubic-bezierツール」を利用するとハンドルを自由に動かすだけで、cubic-bazzier(数値, 数値, 数値, 数値)の値を算出してくれるので、これを利用し独自の進行ペースを作成することも可能です。


 

animation-delay:アニメーションを開始させるタイミングを指定する(任意)

animation-delayプロパティでは、「1.0s」「2.0s」のように時間を指定することで、指定された時間分だけアニメーションの開始時間を遅らせることができます。

上の例では、「1.0s」と指定しているため、アニメーションが1秒後に開始されていることが分かります。

なおanimation-durationとanimation-delayの両方を指定する際は、1つ目の値が「animation-duration」、2つ目の値が「animation-delay」の指定となるので注意しましょう。

animation-iteration-count:アニメーションの繰り返し回数を指定する(任意)

animation-iteration-countを使用すると、アニメーションの繰り返し回数を指定することができます。

上の例では、「3」と指定しているため、アニメーションが3回繰り返されているのが分かります。

他にも「1.5」のように少数を指定することで、アニメーション周期1回と半分のみを再生するといったことも可能。また「infinite」を指定してあげると、無限ループ再生をすることもできます。

数値 「1」「2」といった具合に指定してあげることで、再生回数を指定することができる

※「0.5」などの少数を使用すると、アニメーション周期の半分のみを再生するといった指定も可能

inifinite アニメーションを無制限に繰り返す

animation-direction:アニメーションを再生させる方向を指定する(任意)

animation-directionプロパティを指定することで、アニメーションを再生させる方向を指定することができます。

上の例では「reverse」という値を指定しているため、keyframesで指定した終点(100%)から始点(0%)の方向にアニメーションが再生されています。

なお、他にも以下のような値を使用することが可能です。

normal(初期値) アニメーションを毎回順方向に再生します
reverse アニメーションを毎回逆方向に再生します
alternate アニメーションを毎回反転させ、初回は順方向で再生します
reverse アニメーションを毎回反転させ、初回は逆方向で再生します

animation-fill-mode:アニメーション前後のスタイルを指定する(任意)

animation-fill-modeを使用すると、アニメーションを実行する前後のスタイルを指定することができます。

通常であればアニメーション終了後は以下のようにもとの状態に戻るようになっています。

アニメーション終了後はもとの状態に戻る

これを「forwards」のように指定してあげることで、キーフレームで最後に設定されているスタイルを保持し、もとの状態に戻らないようにすることが可能です。

animation-fill-mode: forwardsを指定している例

なお、他にもanimation-fill-modeでは以下のような値を使用することができます。

none(初期値) アニメーションが実行されていない間は、スタイルを適用させない
forwards アニメーション終了後、キーフレームで最後に設定されているスタイル(通常であれば100%の状態)が適用される
backwards animation-delayの期間は、キーフレームで最初に設定されているスタイル(通常であれば0%の状態)が適用される
both forwardsとbackwardsの両方が適用される

animation-play-state:アニメーションが実行中か停止中かを指定する(任意)

最後にanimation-play-stateを使用すると、アニメーションが実行中か停止中かを設定することができます。

runnning(初期値) アニメーションを実行します
paused アニメーションを停止します

基本的にはこちらの値を「paused」にしてアニメーションを止めておくことはないと思いますが、ホバー時のみ停止させたいといった場合などには便利です。

 

 

複数のアニメーションを指定する方法

最後に1つの要素に対して、複数のアニメーションを指定する方法を紹介します。

複数のキーフレーム設定を1つの要素に対して指定したい場合は、以下のように「, 」で区切って設定してあげればOKです。

これで要素がフェードインしながら、左から右へ移動していることが分かると思います。

1つのキーフレーム設定にまとめられる場合はそれでも良いですが、「左から右移動のアニメーション」「フェードイン用アニメーション」などキーフレーム設定を分けておきたい場合もあると思うので、その場合は前述したようにanimationプロパティの値を「,」で区切って設定してあげると良いでしょう。

 

 

まとめ

まとめです。今回は、CSSだけでアニメーションが作れるるkeyframesとanimationプロパティの使い方について紹介しました。

keyframesとanimationはセットで使われるため、まずはそれぞれの役割について理解しておくのが重要です。

keyframesとanimationの役割を解説した図

keyframes どのように変化させるかといった「アニメーション動作」を設定する
animationプロパティ アニメーション動作にかかる時間や回数などを設定する

また、役割の違いが分かったら、それぞれの書き方を覚えておきましょう。

keyframesの書き方

animationプロパティで指定できる8つのプロパティの意味

なお、シンプルなアニメーションであればtransitionプロパティも使用することが可能。transitionプロパティの使い方は以下の記事で解説していますので、興味がある方はこちらも併せてご覧頂くと良いかと思います。

今回は以上になります。最後までご覧頂き、ありがとうございました。


 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-CSS