閉じる

【CSS】アニメーションの基礎知識・使い方・サンプルコード付き(初心者向け)

CSSで動きをつけれる「animation」「transition」を解説。
「animation」「transition」の基礎知識はもちろんのこと、「animation」「transition」を使い実践的に動きをつける事ができ、webページをより華やかにする事ができます。
全てサンプルコードが付いているので、実際に手を動かして学ぶことができます。

カテゴリ: HTML/CSS

こんにちは!
WEB制作をはじめて少したったけど、次は「WEBに動きをつけてみたい・・!」「javascriptを覚えないと動きをつけれないのかな・・?」「アニメーションって何・・?」

WEBに動きをつけてみたいと思っている、初心者WEB製作者の方も多いのではないでしょうか?
実はjavascriptを覚えてなくても、CSSのアニメーションで作成できる動きは多数あります!

今回は初心者の方向けに、「CSSアニメーションとは」「animation・transition」「アニメーションに使うプロパティ・値」「アニメーションの記述方法」を中心に詳しく解説していきます。

CSSアニメーションとは

CSSアニメーションとは、下記のように動きをつけれる機能のことです。

javascript不要で、CSSだけで動きをつけることがき、初心者の方も簡単に使う事ができます。

アニメーションを作成する方法は、「transition」「animation」の2通りあります。
transition最大の特徴は「変化のタイミングは1回のみ(hover、マウスオーバーなど)」
animation最大の特徴は「変化のタイミングを指定でき、細かい設定ができる」
簡単だけど、細かい設定をできないのが「transition」
少し難しいけど、細かい設定をできるのが「animation」という理解で今は大丈夫です。
詳しく解説していきます。

transition

マウスオーバーした時に黒色の正方形が赤色に変わります。

サンプルコード表示結果↓

HTMLサンプルコード

CSSサンプルコード

※解説
変化させたい要素に「transition」を指定し、変化後のデザインを:hover擬似要素で指定します。
今回の例では、黒色の四角形(変化させたい要素)下記コードで作成

最後の行に「transition: 1s;」を指定、「1s」は1秒間かけて変化するという値。

次にマウスオーバー(:hover)時に変化させたいデザインを下記コードで指定

背景色を赤に指定。
まとめると、変化させたい要素(黒色四角形)に「transition」指定→マウスオーバー(:hover)した時に変化させたいデザイン(背景色赤)を指定する。

transitionには様々なプロパティ、値を指定する事ができます、つまり『様々な種類の変化を加える事ができる』という事です、下記より紹介していきます。

transitionで指定できるプロパティ・値

transitionで指定できるプロパティ(幅・高さ)

width・height(幅、高さ)プロパティにも変化を加える事ができます。 下記の黒色正方形をマウスオーバーすると、幅・高さも変化します。

サンプルコード表示結果↓

HTMLサンプルコード

CSSサンプルコード

※解説
変化後(taranstionsample:hover)のデザインに「width:変化させたい値」「hegiht:変化させたい値」を指定する事で変化させる事ができます。

この他にも「transition」にはほとんどのCSSプロパティが指定できます。

●color
●font-size
●font-wegiht
●top
●left
●right
●bottom
●margin
●letter-spacing
●box-shadow

transitionで指定できる値 (変化にかかる時間)

transitionには変化にかかる時間を指定する値を設定できます。
下記は3秒かけて変化を指定

サンプルコード表示結果↓

HTMLサンプルコード

CSSサンプルコード

※解説
transition: 3s;を指定し3秒かけて変化させています。
指定できる値としては、下記となります.

指定できる単位日本語単位指定の仕方
s1s1秒。初期値は0s
msミリ秒1000msで1秒

transitionで指定できるプロパティ(速度)

transitionには変化の速度を指定するプロパティがあります。
下記は変化がゆっくり始まるように速度指定

サンプルコード表示結果↓

HTMLサンプルコード

CSSサンプルコード

「ease-in」を指定することで変化の始まりをゆっくりに指定する事ができます。
指定できるプロパティの例としては下記となります。

プロパティ速度
easeゆっくり始まって、ゆっくり終わる
ease-inゆっくり始まる
ease-outゆっくり終わる
ease-in-outeaseよりゆっくり始まって、ゆっくり終わる
linear一定の速度で始まって終わる
steps(n)nの回数だけコマ送りする

transitionで指定できる値 (変化の開始時間)

transitionには変化の開始時間を指定する「transition-delay」プロパティがあります。
下記はマウスオーバーしてから1秒後に変化が始まるように指定。
サンプルコード表示結果

サンプルコード表示結果↓

HTMLサンプルコード

CSSサンプルコード

※解説
CSSコード14行目

を指定する事で変化の開始時間を指定する事ができます。
「transition-delay」プロパティは変化の開始時間を指定できるプロパティで、
指定できる値の単位としては下記となります。

指定できる単位日本語単位指定の仕方
s1s1秒。初期値は0s
msミリ秒1000msで1秒

transitionのメリット・デメリット

●メリット
簡単に実装する事ができ、アニメーション初心者には分かりやすく向いている。
●デメリット
細かい設定はできない(アニメーションのループや自動再生)

animation

マウスオーバーしなくても正方形が動き出しています。
ここがtransitionとの大きな違いです。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
animationは「keyframe」で動きを決めます。

keyframeの基本記述方法

上記がkeyframeの基本的な記述方法です。

順番に解説していきます。

上記コードで黒色の四角形を作成、6行目「position: relative」で四角形の最初の位置を決めます。
次に7行目で、animationを指定させます。
アニメーションを指定するには、
animation : keyflameの名前 変化時間 細かい指定(繰り返しなのかなど)
今回の例では
keyframeの名前→「sample」
変化時間→「3s(3秒で変化)」
細かい設定→「infinite(無限繰り返し)」
を設定


@keyframes 〇〇→〇〇に指定した名前、今回の例では「example」を指定したので「example」記入

0%〜99%の変化は「背景色赤」

100%の時に「背景色青」「移動右に300px」

まとめると、animationで名前、時間、繰り返し方を設定→keyframesで動き、デザインを決めるといった流れとなります。

keyframesの記述方法

keyframesでの記述方法を詳しく紹介します


●keyframeの基本記述方法

●0%から100%の指定

●最後だけ指定

●細かく指定

アニメーションで指定できる値・プロパティ

animationで指定できる値 (変化にかかる時間)

animationには変化にかかる時間を指定することができます。
今回の例では3秒かけて変化させました。

指定できる値としては、下記となります。

指定できる単位日本語単位指定の仕方
s1s1秒。初期値は0s
msミリ秒1000msで1秒

animationで指定できるプロパティ(速度)

animationには変化の速度を指定するプロパティがあります。

今回は「ease-in」を指定しました。 指定できるプロパティの例としては下記となります

プロパティ速度
easeゆっくり始まって、ゆっくり終わる
ease-inゆっくり始まる
ease-outゆっくり終わる
ease-in-outeaseよりゆっくり始まって、ゆっくり終わる
linear一定の速度で始まって終わる
steps(n)nの回数だけコマ送りする

animationで指定できる値 (変化の開始時間)

animationで変化の時間を指定する際は

変化時間の隣に記述してください。上記例だと3s(3秒後に変化開始)

animationで指定できる値 (回数・ループ指定)

animationでは再生回数を指定する事ができます。

1→(初期値) infinte→無限ループ

animationで指定できる値 (再生方向)

animationでは再生方向を指定する事ができます。

指定できる値は下記となります。

プロパティ動き
narmal通常方向(初期値)
alternate通常方向と、逆方向を繰り返す
reverse毎回逆方向を実行する
alternate-reverse通常方向と、逆方向を繰り返す

animationで指定できる値 (実行前・後の状態)

animationでは実行前・後の状態を指定する事ができます。

指定できるプロパティの例としては下記となります。

プロパティ意味
none初期値
forwards再生後も、@keyframes(100%)のスタイルが適用される。
backwards再生前は、@keyframes(0%)のスタイルが適用される。
both再生前は@keyframes(0%)、再生後は@keyframes(100%)のスタイルが適用される

animationで指定できる値 ( 一時停止・再生指定)

animationでは一時停止・再生指定の状態を指定するanimation-play-state
プロパティを指定する事ができます。
指定できる値の例としては下記となります。

プロパティ動き
running再生
paused一時停止

animationのメリット・デメリット

●メリット 
 詳細設定ができ、連続したアニメーションを作成できる

●デメリット
 詳細設定ができるが「transtion」より覚える事が多く少し難易度が高い

transitionサンプルコード

ご自身のコードにコピペで貼り付け、色や秒数などの値を変えてみてください。

色が変わり動くボタン

これを作る↓

HTMLサンプルコード

CSSサンプルコード

回転させる

マウスオーバー時に「transform: rotate(360deg);」を指定し回転させます。

サンプルコード表示結果↓
回転

HTMLサンプルコード

CSSサンプルコード

animationサンプルコード

文字が浮かび上がってくる

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

ボールがバウンドする

transform: translateY;を使用しバウンドを作成します。

HTMLサンプルコード

CSSサンプルコード

まとめ

今回は、「CSSアニメーションとは」「animation・transition」「アニメーションに使うプロパティ・値」「アニメーションの記述方法」を中心に解説してきました。

1.CSSアニメーションとは「javascript」不要でWEBに動きをつける事ができ、
「transition」「animation」の2通の作成方法がある

2.「transition」は主に変化させたい要素に「transition」を指定し、
 変化後のデザインを:hover擬似要素で指定する

3.「animation」は「keyframe」を使用し動きを指定する

いかがだったでしょうか?
アニメーションはCSSの中でも難易度が高く、むずかし感じたかもしれませんが「javascript」使用せず、動きをつけることができるので、とても便利です、これを機会に学習してみて下さい。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。