HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

  1. ホーム
  2. HTML・CSS
  3. 応用70.CSSアニメーション(Keyframe Animation)

応用70.CSSアニメーション(Keyframe Animation)

  1. 公開日:2019年10月15日
  2. 最終更新日:2022年08月10日

HTML・CSS

この記事をシェアする:

Keyframe Animationとは

transtionプロパティより、高度なアニメーションの設定が可能になります。
Keyframe Animationは、再生に関する設定(animation)とキーフレーム(@keyframes)を組み合わせて利用します。
Internet Explorer10以上。Android Browser5以上であれば、すべて対応しています。
この章でのサンプルは、ベンダープレフィックスは付与していません。必要に応じてベンダープレフィックスを付与してください。

※Internet Explorer10以上から対応
※ベンダープレフィックスの対応は下記の通りです。
-webkit- … Android Browse4~4.4.4で必要(5以降不要)

CSS Animationの各ブラウザの対応状況
Can I use -CSS Animation-

下記は、矩形エリアをホバーまたはタップすると、丸が移動するサンプルです。


<div class="animation">
  <div></div>
</div>


.animation{
  width: 200px;
  height: 200px;
  margin: auto;
  background-color: #ddd;
}
.animation div{
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #333;
}
.animation:hover div{
  animation-name: move;
  animation-duration: 4s;
  animation-timing-function: linear;
}
@keyframes move{
  25%{
    transform: translateX(180px);
  }
  50%{
    transform: translateX(180px) translateY(180px);
  }
  75%{
    transform: translateX(0px) translateY(180px);
  }
  100%{
    transform: translateX(0px) translateY(0px);
  }
}

transitionプロパティとの違い

Keyframe Animationは、下記の点でtransitionより優位な点があります。

  • :hoverなどの疑似クラス以外でも、アニメーションのトリガー指定ができる。
    例えばページを開いたときに即実行させることもできる。
  • 時間軸で実行するプロパティを自由に指定、切り替えるができる。
  • 無限の繰り返し、再生順序の入れ替えができる。

animation-name

指定した要素に使うアニメーション名の指定。
animation-nameの名前と@keyframesの名前を同じにすることで連携させます。
名前をカンマで区切ることで複数の@keyframesと連携が可能。


.selector{
  animation-name: move;
  animation-name: move1, movie2;
}

命名ルール

  • 英数字が利用できる。大文字小文字は区別しない。
  • 記号は、ハイフン( – )、アンダースコア( _ )のみ。
  • 名前の先頭に、ハイフンは指定可。
  • 数字、アンダースコアは、名前の先頭に指定できない。
  • 記号は連続で指定もできるが、名前の先頭はハイフンは1つのみ。
  • 名前に、none、unset、initial、inherit、は指定できない。

/* 指定可能な名前 */
.selector{
  animation-name: move;
  animation-name: move1;
  animation-name: move-name;
  animation-name: move_name;
  animation-name: -move;
  animation-name: move--name;
  animation-name: move__name;
}


/* 指定不可な名前 */
.selector{
  animation-name: 1move; /* 先頭が数字 */
  animation-name: _move1; /* 先頭がアンダースコア */
  animation-name: --move; /* 先頭がダブルハイフン */
  animation-name: *move; /* アスタリスクは使えない */
  animation-name: move/name; /* スラッシュは使えない */
  animation-name: none; /* noneは使えない */
}

animation-duration

アニメーションの開始から終了までの総時間を指定するプロパティ。
値は整数または、浮動小数で指定します。
カンマで区切ることで複数指定が可能で、animation-nameの順番で連携します。
初期値は0s。

  • s…1秒は1s。0.5秒は0.5s。
  • ms…ミリ秒。1秒は1000ms。0.5秒は500ms。

.selector{
  animation-duration: 0.4s;
  animation-duration: 0.4s, 0.6s;
}

animation-timing-function

加速度(イージング)を指定するプロパティ。値は下記の通りです。
カンマで区切ることで複数指定が可能で、animation-nameの順番で連携します。

  • ease(初期値)…開始時と終了時は緩やか。
  • ease-in-out …開始時と終了時は、easeより緩やかに変化。
  • ease-in …開始時は緩やか、終了に近づくと早く変化。
  • ease-out …開始時は早く変化、終了時は緩やかに変化。
  • linear …一定の速度。

下記は、グレーエリアをホバーまたはタップすると、移動するサンプルです。
※iOS Safaraiではタップで処理を実行する場合、ontouchstart=””が必要です。


<ul class="easing" ontouchstart="">
  <li class="ease">ease</li>
  <li class="ease-in-out">ease-in-out</li>
  <li class="ease-in">ease-in</li>
  <li class="ease-out">ease-out</li>
  <li class="linear">linear</li>
</ul>


.easing{
  width: 300px;
  background-color: #333;
}
.easing li{
  width: 100px;
  height: 30px;
  line-height: 30px;
  margin-bottom: 2px;
  padding-left: 2px;
  background-color: #ddd;
  font-size: 14px;
}
.easing:hover li{
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
.easing:hover .ease{
  animation-name: move1;
  animation-timing-function: ease;
}
.easing:hover .ease-in-out{
  animation-name: move2;
  animation-timing-function: ease-in-out;
}
.easing:hover .ease-in{
  animation-name: move3;
  animation-timing-function: ease-in;
}
.easing:hover .ease-out{
  animation-name: move4;
  animation-timing-function: ease-out;
}
.easing:hover .linear{
  animation-name: move5;
  animation-timing-function: linear;
}
@keyframes move1{
  100%{ transform: translateX(200px); }
}
@keyframes move2{
  100%{ transform: translateX(200px); }
}
@keyframes move3{
  100%{ transform: translateX(200px); }
}
@keyframes move4{
  100%{ transform: translateX(200px); }
}
@keyframes move5{
  100%{ transform: translateX(200px); }
}

特殊な値で、段階的に変化させるsteps()があります。コマ送りのアニメーション(紙芝居や信号機の変化のような場合)に向いています。
steps(整数, start または end)

  • 第1引数…整数で指定。指定した数の段階で変化。
  • 第2引数…start または end を指定。
    • start:アニメーション開始時から変化。
      2 -> 3
    • end:アニメーション終了時に変化。
      1 -> 2 -> 3

詳細にイージングの調整を行う場合は、cubic-bezier()を使用します。
cubic-bezier()は、変化の度合いを3次ベジェ曲線で指定します。
cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値)

下記は、cubic-bezier()をWEB上でシュミレーションできるサイトです。

animation-delay

指定した時間までアニメーションを開始させないプロパティ。開始のタイミングをずらす場合に利用します。
値は整数または、浮動小数で指定します。
カンマで区切ることで複数指定が可能。animation-nameプロパティの順序と連動します。
初期値は0s。

  • s…1秒は1s。0.5秒は0.5s。
  • ms…ミリ秒。1秒は1000ms。0.5秒は500ms。

animation-iteration-count

アニメーションを繰り返す回数を指定するプロパティ。
値は整数またはinfiniteで指定します。
初期値は1。infiniteを指定した場合は、無限に繰り返します。
カンマで区切ることで複数指定が可能で、animation-nameの順番で連携します。

animation-direction

再生方向を指定するプロパティ。
カンマで区切ることで複数指定が可能で、animation-nameの順番で連携します。

  • normal(初期値)…順方向の再生。
    0% ~ 100%
  • reverse…逆方向の再生。
    100% ~ 0%
  • alternate…順方向、逆方向の再生を交互に繰り返す。
    0% ~ 100% ~ 0% ~ …
  • alternate-reverse…逆方向、順方向の再生を交互に繰り返す。
    100% ~ 0% ~ 100% ~ …

animation-fill-mode

開始前、終了後のスタイルを指定するプロパティ。
カンマで区切ることで複数指定が可能で、animation-nameの順番で連携します。

  • none(初期値)
    元のスタイルから始まり、元のスタイルに戻る。
    元のスタイル -> 0% ~ 100% -> 元のスタイル
  • forwards
    元のスタイルから開始し、再生後、最後のキーフレーム(100% または to)で止まる。
    元のスタイル -> 0% ~ 100%
  • backwards
    開始時、元のスタイルは適用されず、最初のキーフレーム(0% または from)から開始。
    再生後、元のスタイルに戻る。
    0% ~ 100% -> 元のスタイル
  • both
    最初のキーフレーム(0% または from)から開始。最後のキーフレーム(100% または to)で止まる。
    元のスタイルは適用されない。
    0% ~ 100%

@charset "UTF-8";
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

div{
  width: 100px;
  height: 100px;
  background-color: #333;
  animation-name: move;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-fill-mode: none;
}

@keyframes move{
  from{
    background-color: #f00;
    transform: translateX(100px);
  }
  to{
    ackground-color: #00f;
    transform: translateX(300px);
  }
}

animation-play-state

アニメーションの再生・停止を指定するプロパティ。
クリックなどhover以外のイベントでの実行は、JavaScriptを利用します。

  • running(初期値)…実行
  • paused…停止

<div id="move"></div>
<p id="btn">停止</p>


*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
div{
  width: 100px;
  height: 100px;
  background-color: #333;
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
}

@keyframes move{
  to{
    transform: translateX(600px);
  }
}


const btn = document.getElementById("btn");
const move = document.getElementById("move");
btn.onclick = function(){
  if(move.style.animationPlayState == "running"){
    move.style.animationPlayState = "paused";
  }else{
    move.style.animationPlayState = "running";
  }
}

animation

ショートハンドのプロパティ。各値は半角スペースで区切ります。複数指定する場合は各グループをカンマで区切ります。
※animation-delayの指定をする場合は、animation-durationの指定が必須です。

初期値は、下記の通りです。

  • 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;

@keyframes

時間軸の指定と実行するプロパティの指定。時間軸は、キーワードまたは%で指定します。
%で指定する場合は、0%~100%間で指定します。
キーワードと%を混在した指定も可能です。
開始または終了は省略することも可能です。
アニメーション名は、animation-nameプロパティで指定します。

キーワードで指定した場合。from(開始)to(終了)

@keyframes [アニメーション名] {
 from {
  CSSプロパティ: 値;
 }
 to {
  CSSプロパティ: 値;
 }
}

%で指定した場合

@keyframes [アニメーション名] {
 0% {
  CSSプロパティ: 値;
 }
 50% {
  CSSプロパティ: 値;
 }
 100% {
  CSSプロパティ: 値;
 }
}

まとめ

  • CSS Animationはanimationプロパティでアニメーション全体の設定を行う。
  • @keyframesで、時間ごとに使用するCSSを指定する。
  • transitionより細かい指定が可能。