動きの曲線と時間
曲線を掴んで動かし、入る・出る・位置が移るの3場面で時間と距離を決める。出力には動きを減らす設定の分岐が必ず入る。参考にした作業面: cubic-bezier.com、easings.net、animista。
見本#
持ち帰る#
:root {
--dur-fast: 120ms;
--dur-base: 240ms;
--dur-slow: 420ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
}
/* 入る。画面に現れるもの */
.enter { opacity: 0; transform: translateY(12px); }
.enter.is-on { opacity: 1; transform: none;
transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
/* 出る。入りより短く */
.leave.is-on { opacity: 0; transform: translateY(calc(12px * -1));
transition: opacity var(--dur-fast) var(--ease-in), transform var(--dur-fast) var(--ease-in); }
/* 位置が移る */
.move { transition: transform var(--dur-slow) cubic-bezier(0.65,0,0.35,1); }
.move.is-on { transform: translateX(calc(12px * 4)); }
/* 一覧の順次表示。要素ごとに --i を振る */
.enter[style*="--i"] { transition-delay: calc(var(--i) * 40ms); }
@media (prefers-reduced-motion: reduce) {
.enter, .leave, .move { transition: none; }
.enter { opacity: 1; transform: none; }
}つまみは JavaScript で動きます。無効の場合は、上の見本は既定の値で描かれ、コピー欄には出発点のCSSと同じ既定の値が入っています。