ef-grid

ef-grid-opacity

with --transition-timing-function:steps(4, start);
with --transition-delay:500ms;--transition-duration:2s
with --transition-delay:50ms;--transition-duration:0.5s

ef-grid-opacity + ef-grid-translate

with --transition-timing-function:steps(4, start);
with .ef-grid-translate-x
with ef-grid-translate-y

ef-grid-filter + ef-grid-translate

with --filter:blur(10px) brightness(1) contrast(1) grayscale(0) hue-rotate(0deg) invert(0) opacity(0) saturate(1);

--transition-timing-function:steps(N, start);

--transition-duration:0.5s 기준이며, N*2 가 fps 가 된다.

with --transition-timing-function:steps(30, start); (60 fps)
with --transition-timing-function:steps(12, start); (24 fps)
with --transition-timing-function:steps(6, start); (12 fps)
with --transition-timing-function:steps(3, start); (6 fps)
with --transition-timing-function:steps(2, start); (4 fps)
with --transition-timing-function:steps(1, start); (2 fps)