Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS

Так же размер, если взять анимацию сундука из примера (128px/114px) в gif формате его размер будет равен ~22.8kb, а размер спрайт листа ~3.43kb, а это простая анимация на 15 кадров

Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS

GIF-анимация состоит из серии кадров, упакованных в один файл. Этот формат поддерживает простую анимацию с ограниченным количеством цветов (до 256) и может включать прозрачные области.

В анимации с GIF вы ограничены возможностями формата, включая скорость анимации и порядок кадров, заданные при создании GIF.

Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS

В моем профиле на codepen добавляю ещё примеры, с анимацией текста, маски для эффекта загрузки картинки. Как соберу достаточно разных вариаций, опишу ещё примеры

Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS

Если точнее то @property ещё не завезли в firefox, а вот функции mod и round со 118 уже есть

Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS

*тайловая графика

Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS

Этим можно управлять (останавливать, воспроизводить, хотя гифками тоже можно), и начинать с определенного кадра анимацию и т.д. В основном используется в играх где "файловая графика" (Герои 3 например), чтобы все изображения хранить в одном файле а потом уже многократно резать и использовать. Поддерживается в chrome 125 версии, safari 15.4 и firefox 118