CSSアニメーション | イージング(animation-timing-function)値と比較用の動作パターン集

2020-01-09CSS, 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に設定可能な値一覧です。

挙動同等なcubic-bezierの値
ease(デフォルト値)開始と完了が滑らか0.25, 0.1, 0.25, 1.0
linear開始から完了まで一定0.0, 0.0, 1.0, 1.0
ease-in開始がゆっくり0.42, 0, 1.0, 1.0
ease-out完了がゆっくり0, 0, 0.58, 1.0
ease-in-out開始と完了がゆっくり0.42, 0, 0.58, 1.0
steps※指定値によって変化(※)
cubic-bezier指定値によって変化(※)

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

2020-01-09CSS, CSS アニメーション 基本

Posted by Yousuke.U