

そんな疑問にお答えします。
CSSでアニメーションさせたいとなった時、真っ先に思い浮かぶのは「transition」だと思います。
僕も最初アニメーションなら「transition」と覚えていました。
でもある時「animation」、「keyframes」というものがあることを知りました。
そして2つに分かれたCSSの記述方法に戸惑ったのを覚えています。
今回は備忘録としてanimationとkeyframesの使い方の記事をアップします。
以前のtransitionの記事と合わせてしっかり身につけておきたいですね。
【徹底解説】transitionプロパティの使い方をマスターしよう!【CSS】
transitionとの違い
CSSアニメーションには「transition」と「animation」の2つがあります。
どちらも指定した要素をアニメーションさせることができます。
だったらどちらを使っても良さそうなものですが、両者にははっきりとした違いがあります。
transition | animation | |
---|---|---|
動きの指定 | 始めと終わりのみ指定可 | 段階を細かく指定できる |
開始時 | マウスホバーなど開始のきっかけが必要 | 開始のきっかけは不要(自動再生できる) |
再生後 | 再生後にプロパティが元に戻る | 再生後にプロパティの継続ができる |
animationはアニメーションの段階を細かく指定することができ、かつアニメーション開始のきっかけも不要なところが主が特徴です。
animationとkeyframes
では次にアニメーションの指定の仕方について解説します。
「animation」は「@keyframes」とセットで使用します。
- animationは「設定」
- @keyframesは「動き」
「@keyframes」でアニメーションの動きを指定し、「animation」でその@keyframesで指定した動きを要素に設定します。
文章だけではイメージしにくいので実際のアニメーションを見てみましょう。
こちらのコードは以下のとおりです。
<div class="animation"></div>
.animation {
width: 100px;
height: 100px;
background: #00CC99;
animation: animation-gorigori 3s ease 0s infinite normal;
}
@keyframes animation-gorigori {
0% {width: 100px;}
100% {width: 100%;}
}
animationプロパティでアニメーションの名前、アニメーションの開始から終わるまでの時間、アニメーションの繰り返し回数等を設定しています。
そして@keyframesでその動きを指定しています。
ここは0%から100%までの中で細かく設定できます。
animation関連のプロパティ
次にanimationのプロパティを見ていきます。
animationはショートハンドプロパティといってbackgroundのように複数のプロパティを一括で指定できるプロパティです。
先ほどの例ですと
animation: animation-gorigori 3s ease 0s infinite normal;
となっていました。
これがショートハンドで書いた形です。
この記述を1つずつばらして書いてみると
animation-name: animation-gorigori;
animation-duration: 3s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
となります。
これらはどちらも同じ指定をしています。
animationのプロパティの種類
animationで指定できるプロパティの種類は以下のとおりです。
種類 | 説明 |
---|---|
animation-name | キーフレームの名前 |
animation-duration | かかる時間 |
animation-timing-function | 速度 |
animation-delay | 何秒後に開始するか |
animation-iteration-count | 繰り返し回数 |
animation-direction | 再生する方向 |
animation-fill-mode | アニメーション前後のプロパティの状態 |
animation-play-state | アニメーションの再生と停止 |
それでは1つずつそれぞれのプロパティを解説していきます。
animation-name(キーフレームの名前)
どの@keyframesを使用するか指定するためのプロパティです。
記述の仕方はこのようになります。
.animation {
animation-name: animation-gorigori; /* ここに記述 */
}
@keyframes animation-gorigori {
0% {width: 100px;}
100% {width: 100%;}
}
@keyframesの後ろに記述しているのがanimation-nameで指定した値です。
animation-duration(かかる時間)
何秒間アニメーションさせるかを指定するためのプロパティです。
1sで指定の場合
<div class="animation1"></div>
.animation1 {
width: 100px;
height: 100px;
background: #00CC99;
animation-name: animation-gorigori1;
animation-duration: 1s; /* 開始から終了まで1秒 */
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
}
@keyframes animation-gorigori1 {
0% {width: 100px;}
100% {width: 100%;}
}
0%から100%までのアニメーション時間が1秒です。
3sで指定の場合
<div class="animation2"></div>
.animation2 {
width: 100px;
height: 100px;
background: #00CC99;
animation-name: animation-gorigori2;
animation-duration: 3s; /* 開始から終了まで3秒 */
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
}
@keyframes animation-gorigori2 {
0% {width: 100px;}
100% {width: 100%;}
}
0%から100%までのアニメーション時間が3秒です
animation-timing-function(速度)
アニメーションの速度を指定するためのプロパティです。
値 | 説明 |
---|---|
ease | ゆっくり始まって、ゆっくり終わる(初期値) |
linear | 一定の速度で始まって終わる |
ease-in | ゆっくり始まる |
ease-out | ゆっくり終わる |
ease-in-out | easeよりさらにゆっくり始まってゆっくり終わる |
上図はグレーのエリアをマウスオーバーすることで動きます。
アニメーション開始から終了までの時間を3秒で指定しています。
それぞれの動きの違いがわかると思います。
animation-delay(何秒後に開始するか)
アニメーションを何秒後に開始するかを指定するためのプロパティです。
初期値は「0s」です。
animation-iteration-count(繰り返し回数)
アニメーションを何回再生するかを指定するためのプロパティです。
値 | 説明 |
---|---|
infinite | 無限に再生を繰り返す |
数値 | 数値で再生回数を指定する(初期値は1) |
animation-direction(再生する方向)
アニメーションを再生する方向を指定するためのプロパティです。
2回以上再生する場合のみ適用されます。
値 | 説明 |
---|---|
normal | 通常方向を実行する(初期値) |
alternate | 通常方向と逆方向を繰り返す |
reverse | 毎回逆方向を実行する |
alternate-reverse | 通常方向と逆方向を繰り返す(逆再生から始まる) |
animation-fill-mode(アニメーション前後のプロパティの状態)
アニメーションの再生前後のスタイルを指定するためのプロパティです。
値 | 説明 |
---|---|
none | 初期値 |
forwards | 再生後も@keyframes(100%)のスタイルが適用されたままになる |
backwards | 再生前は@keyframes(0%)のスタイルが適用される。 |
both | 再生前は@keyframes(0%)が、再生後は@keyframes(100%)のスタイルが適用される |
animation-play-state(アニメーションの再生と停止)
アニメーションを再生中か、一時停止かを指定するためのプロパティです。
値 | 説明 |
---|---|
running | 再生(初期値) |
paused | 一時停止 |
animationプロパティで一括指定する
以上のプロパティをanimationプロパティで一括指定できます。
記述の仕方はこのようになります。
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];
初期値で当てはめると
animation: none 0s ease 0s 1 normal none running;
となります。
順番は上記の通りでなくても問題ありませんが、「animation-duration」と「animation-delay」は共に秒数を指定するので、先に書いたものが「animation-duration」、後に書いたものが「animation-delay」として処理されます。
keyframesの指定方法
keyframesの指定の仕方について見ていきます。
書き方はいくつかあります。
通常の書き方
@keyframes name{
0%{
}
100%{
}
}
最後だけ指定
@keyframes name{
100%{
}
}
最初と最後だけ指定
@keyframes name{
from{
}
to{
}
}
%で区切って細かく指定
@keyframes name{
0%{
}
25%{
}
50%{
}
75%{
}
100%{
}
}
0%から100%まで好きなタイミングで区切ってアニメーションを設定することができます。
0%と100%は必須ではありません。
任意の箇所で指定できますので、複数な動きが可能になります。
細かい微調整ができるのが大きなメリットですね。
たとえば以下のような動きをつけることができます。
<div class="animation3"></div>
.animation3 {
width: 100px;
height: 100px;
background: #00CC99;
animation: animation-gorigori3 5s linear 0s infinite normal;
}
@keyframes animation-gorigori3{
0%{
width: 0%;
}
25%{
width: 50%;
}
50%{
width: 30%;
}
75%{
width: 80%;
}
100%{
width: 100%;
}
}
最初はとっつきにくいかもしれませんが、使い慣れるとアニメーションの幅が広がります。
しっかりマスターしておきましょう。
投稿者 トシ
コメントを残す