応用70.CSSアニメーション（Keyframe Animation）

Keyframe Animationとは

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

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

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

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

animation-name

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

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

/* 指定可能な名前 */
.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（終了）

%で指定した場合

まとめ

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