トップ > Programing > animation・keyframesを徹底解説

animation・keyframesを徹底解説

animation・keyframesを徹底解説

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

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

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

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

transitionとの違いは？

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

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

「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;
}

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

@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アニメーション終了時にアニメーションする前のスタイルを適用します。
bothforwardsと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」に設定しています。 

まとめ

指定できるプロパティが多いのでかなり大作記事になってしまいましたが、「animation」、「keyframes」を細かく解説しました。

最近のWebサイトは8割〜9割は何かしらのアニメーションさせていますので、もはやスタンダードな表現技術です。ぜひこの機会にマスターしてみてください。 

Category&Tag

icon_sec_titleRELATED ARTICLES

タグ

icon_sec_titleCATEGORY

WEBデザイン
WEBデザイン
 プログラミング
プログラミング
 WEBツール
WEBツール
 WEBマーケ・SEO
WEBマーケ・SEO