CSS | アニメーションのイージングで指定可能な値と比較

2020-01-082020-09-27CSS アニメーション 基本,CSS

こちらはCSSアニメーションのイージングプロパティ（animation-timing-function）で指定可能な値と、比較用の動作サンプル集になります。

animation-timing-functionの設定方法

CSSアニメーションのイージング設定はanimation-timing-functionプロパティで個別に、またはanimationプロパティにて一括で設定する事が可能です。

animation-name: animname;
animation-duration: 1s;
animation-timing-function: ease;

animation: bar-animation 1s ease;

animation-timing-functionの値一覧

animation-timing-functionに設定可能な値一覧です。

※stepsは、指定した分割数によって段階的にアニメーションさせる値で、分割数はsteps(分割数,end)で指定可能。
分割数はアニメーション時間に比例します。

※cubic-bezierは自身でアニメーション速度の挙動を制御でき、3次ベジェ曲線のP1とP2をcubic-bezier(x1, y1, x2, y2) という風に制御値を設定可能です。

伸縮バーでイージングアニメーションを比較

伸縮バーアニメーションでイージングを比較した場合の動作サンプルになります。

See the Pen CSS animation iteration count by yochans (@yochans) on CodePen.

アニメーション時間は3秒、繰り返しはinfinite（無制限）、widthにて横幅変更しています。
3秒のアニメーション完了のイージング毎による挙動の違いがわかります。

 <div class="samles">
  <div class="ease">ease(デフォルト値)</div>
  <div class="linear">linear</div>
  <div class="ease-in">ease-in</div>
  <div class="ease-out">ease-out</div>
  <div class="ease-in-out">ease-in-out</div>
  <div class="steps">steps</div>
 </div>

.samles div{
  width: 100%;
  max-width: 70%;
  margin: 6px;
  padding: 3px;
  color: #FFF;
  background: #0091EA;
  white-space: nowrap;
  animation: animation 3s ease infinite;
}

.samles .ease{
  animation-timing-function: ease;
}

.samles .linear{
  animation-timing-function: linear;
}
.samles .ease-in{
  animation-timing-function: ease-in;
}
.samles .ease-out{
  animation-timing-function: ease-out;
}

.samles .ease-in-out{
  animation-timing-function: ease-in-out;
}

.samles .steps{
  animation-timing-function: steps(20, end);
}

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

X軸移動アニメーションでイージングを比較

X軸移動バーアニメーションでイージングを比較した場合の動作サンプルになります。

See the Pen CSS animation timing function (box) by yochans (@yochans) on CodePen.

アニメーション時間は3秒、繰り返しはinfinite（無制限）、translateXにてX座標を変更しています。

 <div class="samles">
  <div class="ease">ease(デフォルト値)</div>
  <div class="linear">linear</div>
  <div class="ease-in">ease-in</div>
  <div class="ease-out">ease-out</div>
  <div class="ease-in-out">ease-in-out</div>
  <div class="steps">steps</div>
 </div>

.samles div{
  width: 150px;
  margin: 6px;
  padding: 3px;
  color: #FFF;
  background: #0091EA;
  white-space: nowrap;
  animation: animation 3s ease infinite;
}

.samles .ease{
  animation-timing-function: ease;
}

.samles .linear{
  animation-timing-function: linear;
}
.samles .ease-in{
  animation-timing-function: ease-in;
}
.samles .ease-out{
  animation-timing-function: ease-out;
}

.samles .ease-in-out{
  animation-timing-function: ease-in-out;
}

.samles .steps{
  animation-timing-function: steps(20, end);
}

@keyframes animation{
  0%{
transform: translateX(0px);
  }
  100%{
transform: translateX(400px);
  }
}

背景色変更アニメーションでイージングを比較

背景色変更アニメーションでイージングを比較した場合の動作サンプルになります。

See the Pen CSS animation timing function (color) by yochans (@yochans) on CodePen.

アニメーション時間は4秒、繰り返しはinfinite（無制限）、animation-directionはalternate（通常再生後、逆再生）、backgroundにて背景色を変更しています。

stepsは変化の違いをわかりやすくする為に、少なめの分割数にしています。

 <div class="samles">
  <div class="ease">ease(デフォルト値)</div>
  <div class="linear">linear</div>
  <div class="ease-in">ease-in</div>
  <div class="ease-out">ease-out</div>
  <div class="ease-in-out">ease-in-out</div>
  <div class="steps">steps</div>
 </div>

.samles div{
  display:flex;
  margin: 6px;
  padding: 6px;
  color: #FFF;
  background: #0091EA;
  white-space: nowrap;
  animation: animation 4s infinite alternate;
}

.samles .ease{
  animation-timing-function: ease;
}

.samles .linear{
  animation-timing-function: linear;
}
.samles .ease-in{
  animation-timing-function: ease-in;
}
.samles .ease-out{
  animation-timing-function: ease-out;
}

.samles .ease-in-out{
  animation-timing-function: ease-in-out;
}

.samles .steps{
  animation-timing-function: steps(6, end);
}

@keyframes animation{
  0%{
  background: #0091EA;
  }
  100%{
  background: #dc143c;
  }
}