【CSS】animation・keyframesを徹底解説

今回は「animation」、「keyframes」について、細かく徹底的に解説していきます。

「animation」、「keyframes」については知ってはいましたが、アニメーションさせるなら「transition」でいいんじゃない？と思って使っていませんでした。

しかし、当サイトのGALLERYに掲載するサイトを日々収集していると、面白いアニメーションをさせているサイトにたくさん出会います。気になるとコードまで調べて見てみるのですが、たくさんのサイトで「animation」、「keyframes」が使われておりました。

そこで、私もWeb制作者の端くれとして、これを機にしっかりと身につけようと、今回の記事をアップするに至りました。

transitionとの違いは？

「transition」も「animation」とよく似たCSSで、要素をアニメーションさせることができます。だったらアニメーションは「transitionでもいいんじゃない？」と思う方もいるかと思います。しかし、両者には違いがあります。

	transition	animation
動きの指定	始めと終わりのみ指定可	段階を細かく指定可能
アニメーション開始のきっかけ	マウスホバーなど開始のきっかけが必要	開始のきっかけは不要

「animation」はアニメーションの段階を細かく指定することができ、かつアニメーション開始のきっかけも不要！と覚えてください。

animationとkeyframes

この後詳しく解説しますが、まずはanimationとkeyframesの概要をざっと説明します。

animation

CSS Animationsは CSS のモジュールの一つで、時間の経過とキーフレームによって CSS プロパティの値を動かすことができます。キーフレームアニメーションの動作は、タイミング関数、時間、繰り返し回数、その他の属性によって制御されます。
CSS アニメーション – CSS: カスケーディングスタイルシート | MDN

「animation」は「keyframes」で指定した動きを要素に設定します。
「keyframes」で動きを指定しただけではアニメーションはしません。
「animation」で指定した要素に「何秒かけてアニメーションさせるか（animation-duration）」、「何回アニメーションさせるか（animation-iteration-count）」といった設定をしていくことでアニメーションさせることができます。

keyframes

CSS @ 規則の @keyframes は、アニメーションの流れに沿ったキーフレーム(または中間地点)のスタイルを定義することによって、一連のCSSアニメーションの中間ステップを制御します。これにより、アニメーションの中間ステップをCSS Transitionsよりも詳細に制御できます。
@keyframes – CSS: カスケーディングスタイルシート | MDN

「keyframes」はアニメーションの動きを指定することができます。
例えば最初は透明な状態（opacity:0）から、だんだん透明ではなくなって(opacity:1)表示するといった感じです。
また、最初と最後だけではなくて、細かく途中の段階も指定できます。このあたりは後ほど詳しく解説します。

サンプル

百聞は一見に如かず、まずは実際のアニメーションを見てみましょう。

@keyframes animation-sample{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}
.animation-box{
    animation-name: animation-sample;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

「keyframes」の書き方は「@keyframes」と頭に＠がつくので覚えてしまいましょう。
アニメーションに名前をつけます。今回は「animation-sample」という名前にしました。

最初(0%)は「width:0」
最後(100%)は「width:100%」
という動きの指定をしました。

そして、ボックス要素「.animation-box」の「animation-name」で先ほどkeyframesでつけたアニメーションの名前「animation-sample」を設定し、アニメーションさせています。

keyframesの指定方法

では「keyframes」の指定の仕方を見ていきましょう。

最後だけ指定

実はkeyframesは最後だけ指定しても動きます。

@keyframes animation-sample{
    100%{
        width: 100%;
    }
}

最初と最後だけ指定

@keyframes animation-sample{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}

こちらは先ほど冒頭でやった指定の仕方です。

また、最初と最後だけ指定する場合は次のような指定方法もあります。

@keyframes animation-sample{
    from{
        width: 0;
    }
    to{
        width: 100%;
    }
}

%で段階を細かく指定

0％〜100％の間で細く段階を指定することもできます。

@keyframes animation-sample{
    0%{
        width: 0;
    }
    25%{
        width: 50%;
    }    
    50%{
        width: 25%;
    }
    75%{
        width: 50%;
    }    
    100%{
        width: 100%;
    }
}

色々なプロパティでやって見る

せっかくなので「width」だけではなく他のプロパティもアニメーションさせてみましょう。

@keyframes animation-sample4{
    0%{
    }
    20%{
        background: #00e34b;
        transform: scale(1.2) rotate(45deg);
    }    
    40%{
        background: #e2ea00;
        transform: scale(0.8) rotate(-45deg);
    }
    60%{
        background: #ea8400;
        transform: scale(1) rotate(90deg);
    }    
    80%{
        background: #ea0000;
        transform: scale(1.2) rotate(-90deg);
    }    
    100%{
        background: #00b3e3;
        transform: scale(1) rotate(0deg);
    }
}

今度は「background」と「scale」、「rotate」をアニメーションさせてみました。アニメーションさせるプロパティと%での区切り方次第で限りなく色々できますね。

animation関連のプロパティ

動きの指定の次は、実際にアニメーションを要素に設定していきましょう。こちらは「animation」のプロパティで指定していきます。

プロパティ	説明	初期値
animation-name	アニメーションの名前	none
animation-duration	アニメーションが開始してから終了するまでの時間	0s
animation-timing-function	アニメーションのイージング（加速度）	ease
animation-delay	アニメーションが開始するまでの時間	0s
animation-iteration-count	アニメーションを繰り返す回数	1
animation-direction	アニメーションの再生方向（順番・逆再生）	normal
animation-fill-mode	アニメーション開始と終了時のスタイルの状態	none
animation-play-state	アニメーションの再生・停止	running
animation	上記のプロパティを一括で指定できるショートハンド	上記のそれぞれの初期値と同じ

animation-name

アニメーションの名前を指定します。初期値は「none」です。

どの要素にどのアニメーションを設定するか指定をします。実際のコードはこんな感じです。

@keyframes animation-sample{
    省略
}
.animation-box{
    animation-name: animation-sample;
}

「keyframes」と「animation-name」はどちらを先に書いても正常に動作します。私の場合は「keyframes」を先に書きたいのでそのようにしています。これで「animation-box」に「animation-sample」というアニメーションを指定することができました。

animation-duration

「animation-duration」はアニメーションが開始してから終了するまでの時間を指定します。初期値は「0s」です。
指定できる単位は秒（s）とミリ秒(ms)があります。

s	秒単位で指定	1sは1秒。
ms	ミリ秒単位で指定	1msは1000分の1秒

ちなみに「s」は.5sと小数点以下での指定もでき「500ms」と同じになります。

開始から終了まで2秒でアニメーションさせる

@keyframes animation-sample{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}
.animation-box{
    animation-name: animation-sample;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

開始から終了まで5秒でアニメーションさせる

@keyframes animation-sample{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}
.animation-box{
    animation-name: animation-sample;
    animation-duration: 5s;
    animation-iteration-count: infinite;

}

animation-timing-function

アニメーションのイージング（加速度）を指定します。初期値は「ease」です。
指定できる値には下記のものがあります。

ease	開始と終了をゆっくり変化
linear	一定の速度で変化
ease-in	最初はゆっくりで、だんだん速く
ease-out	最初は速く、だんだんゆっくり
ease-in-out	開始と終了をゆっくり変化。「ease」と似てるがこちらの方がさらにゆっくり変化
step-start	開始時に最後の段階へ一気に変化
step-end	終了時に最後の段階へ一気に変化
steps(n,start)
cubic-bezier(n,n,n,n)	3次ベジェ曲線を数値で指定。デフォルトで用意されているイージング以外のイージングを指定できます。3次ベジェ曲線は難解ですが、下記のサイトなどを使えば、動きを確認しながら設定できるので、とても便利です。 Ceaser – CSS Easing Animation Tool – Matthew Lein

@keyframes animation-sample{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}
.animation-box{
    animation-name: animation-sample;
    animation-duration: 3s;
    animation-timing-function:ease-in-out;
}

これを指定するかしないかでアニメーション印象がガラリと変わりますので、ぜひこちらは指定するのおすすめします。

では実際に見てみましょう。下のスタートボタンクリックでアニメーションがスタートします。リセットボタンをクリックで元に戻ります。

ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end
steps(5,start)
steps(5, end)
cubic-bezier(1.000, 0.000, 0.000, 1.000)

それぞれで違うのは「animation-timing-function」だけですが、かなり違った動きになるのがわかると思います。アニメーションさせているサイトで、動きがかっこいいなとか、心地いい動きだなと思うサイトは必ず「animation-timing-function」を設定しています。

これは実際やって慣れていくしかないので、実践しながらベストな動きを見つけてください。

animation-delay

アニメーションが始まるまでの時間を指定します。何秒遅れて開始させるかということです。初期値は「0s」です。

3秒遅らせてスタート

@keyframes animation-sample{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}
.animation-box{
    animation-name: animation-sample;
    animation-duration: 3s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
}

クリック後、3秒後にアニメーションがスタートします。

animation-iteration-count

アニメーションを何回繰り返すか指定します。初期値は「1」です。
指定できる値には下記のものがあります。

数値（n）	アニメーションをn回繰り返します。
infinite	アニメーションを無限に繰り返します。

アニメーションを3回繰り返す

@keyframes animation-sample{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}
.animation-box{
    animation-name: animation-sample;
    animation-duration: 1s;
    animation-iteration-count: 3;
    animation-fill-mode: forwards;
}

クリック後、3回アニメーション繰り返します。

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

@keyframes animation-sample{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}
.animation-box{
    animation-name: animation-sample;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

クリック後、無限にアニメーションを繰り返します。

animation-direction

アニメーションの再生方向を指定します。初期値は「normal」です。
指定できる値には下記のものがあります。

normal	最初（0％）から最後（100％）に向かって順方向に再生します。
reverse	最後（100％）から最初（0％）に向かって逆方向に再生します。
alternate	順方向と逆方向を交互に再生します。行って戻るようなイメージなのでアニメーションの切れ目がなくなります。
alternate-reverse	「alternate」と似ていますがこちらは逆方向から始まり、順方向と交互に再生します。

@keyframes animation-sample{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}
.animation-box{
    animation-name: animation-sample;
    animation-direction: normal;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

実際に見てみましょう。

normal
reverse
alternate
alternate-reverse

animation-fill-mode

アニメーションの開始前と終了後のスタイルを指定します。初期値は「none」です。
指定できる値には下記のものがあります。

none	アニメーション終了時にスタイルを適用しません。
forwards	アニメーション終了時にその状態のスタイルを適用します。
backwards	アニメーション終了時にアニメーションする前のスタイルを適用します。
both	forwardsとbackwardsが両方適応されます。

@keyframes animation-sample{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}
.animation-box{
    animation-name: animation-sample;
    animation-direction: normal;
    animation-duration: 3s;
}

実際に見てみましょう。

none
forwards
backwards
both

animation-play-state

アニメーションの再生・停止を指定します。初期値は「running」です。
指定できる値には下記のものがあります。

running	アニメーションを再生。
paused	アニメーション停止します。

アニメーションを途中で一時停止、再開する

$('.js-start').on('click',function(){
	$('.animation-box').addClass('on');
});
$('.js-stop').on('click',function(){
	$('.animation-box').toggleClass('stop');
});	
$('.js-reset').on('click',function(){
	$('.animation-box').removeClass('on');
	$('.animation-box').removeClass('stop');
});

スタートボタンクリックで「animation-box」に「on」クラスを付与します。
ストップボタンクリックで「animation-box」に「stop」クラスをtoggleClassで付け外しします。

@keyframes animation-sample{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}
.animation-box.on{
    animation-name: animation-sample;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}
.animation-box.stop{
    animation-play-state: paused;
}

スタートをクリックでアニメーションを開始し、ストップをクリックで一時停止、再度ストップクリックで再開します。

animationプロパティでまとめて指定

今まで確認してきたプロパティを一括で指定できるショートハンドになります。
指定できるプロパティは下記になります。

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

@keyframes animation-sample{
	0%{
		width: 0;
	}
	100%{
		width: 100%
	}
}
.animation-box{
	animation: fadeIn 3s ease-in-out 5s infinite reverse forwards running;
}

順番は上記の通りでなくても問題ありませんが、「animation-duration」と「animation-delay」は共に秒数を指定するので、先に書いたものが「animation-duration」、後に書いたものが「animation-delay」として処理されますので覚えておきましょう。

複数のアニメーションを設定

アニメーションは1つだけではなく、複数のアニメーションを設定することができます。複数設定する際は「,」(カンマ)で区切ります。

@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1
	}
}
@keyframes widthIn{
	0%{
		width: 0;
	}
	100%{
		width: 100%
	}
}
.animation-box{
	animation: fadeIn 3s infinite, widthIn 3s infinite;
}

透明度をアニメーションさせる「fadeIn」と、幅をアニメーションさせる「widthIn」2つを、「animation-box」に設定しています。