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