CSSアニメーションでeasing-functionの細かく設定する

アニメーションのeasing-functionでlinear()が使えるようになった。

線形のアニメーションを、たとえば1秒で0〜25%まで、次の1秒で25〜100%までアニメーションするように設定できる。

.linear {
  /* 前も使えてたやつ */
  animation: 2s move linear;

  /* 新しく実装されたlinear() */
  animation: 2s linear(0, 0.25, 1) move infinite;
}

@keyframes move {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}

デモ