image-animation и контроль над анимацией
• css
Проблема
Годами (десятилетиями?) в вебе можно было делать анимированные картинки. Сначала GIF, потом анимированные WebP и Avif. И если в случае видео мы можем контролировать воспроизведение (останавливать и продолжать), то в случае анимированных картинок у нас такой возможности нет.
Или пока не было. Через пару недель выходит Хром 156, в котором добавляется новое свойство – image-animation. Правда, добавляется ли?
image-animation
Свойство имеет значение по умолчанию normal, которое примерно соответствует текущему поведению браузеров (анимация воспроизводится), а также 3 других значения.
paused. При переключении в это состояние картинка перестаёт меняться, всё ожидаемо.
stopped. Анимация останавливается, как и в случае paused. Однако stopped также показывает кадр-обложку (такие бывают в анимированных картинках) или просто первый кадр анимации.
running. Включает воспроизведение анимации явно.
И тут есть второй слой, который не ожидаешь от простого свойства по остановке анимации. Новое дефолтное поведение обязывает браузер синхронизировать воспроизведение анимаций.
Например, если на странице есть две картинки с одинаковым урлом и image-animation: normal (ещё раз, это значение по умолчанию), их воспроизведение будет синхронизировано. А в случае running синхронизации нет.
Если же анимация была приостановлена, а затем вернулась в normal, то она “скакнёт” по шкале времени к остальным картинкам. А в случае running продолжит выполнение с момента, на котором остановилась.
img {
image-animation: paused;
}
img:hover,
img:focused {
image-animation: running;
}Также создатели предложили псевдо-класс :animated-image. Он выбирает элементы, в которых есть анимированная картинка (именно картинка с анимацией, а не просто <img> или <img> с типом файла, который поддерживает анимацию).
img:animated-image {
image-animation: paused;
filter: grayscale(10%) contrast(50%) brightness(80%);
}Выбор между видео и анимированной картинкой
В каких случаях видео показывает себя не очень хорошо, и почему может потребоваться анимированная картинка?
Прозрачный фон и пиксели по краям. Современные форматы видео поддерживают прозрачность, но на практике бывают нюансы. Точно также бывают нюансы и с полоской пикселей по краю (например, это может быть чёрная однопиксельная полоска). В этом плане анимированные картинки ведут себя предсказуемо и стабильно.
Невозможность воспроизведения. В редких случаях видео может не работать вообще. Это может быть связано как с поддерживаемыми форматами, так и с режимом энергосбережения, спецификой браузера, блокировщиками рекламы или чем угодно ещё. Опять же, с картинками такие проблемы происходят существенно реже.
А наоборот, почему видео всё-таки может быть лучше?
Полный контроль воспроизведения. Пауза, перемотка, скорость воспроизведения – всего этого в анимированных картинках (пока) нет.
Более эффективный формат. Современные форматы видео могут быть существенно эффективнее анимированных WebP и GIF. Кроме того, часть инструментов по оптимизации картинок могут не поддерживать анимацию вообще, оставляя вас с раздутыми файлами.
Более эффективное воспроизведение. Браузеры значительно лучше отрисовывают видео на страницах, в то время как анимированные картинки могут уступать по потребляемым ресурсам (батарее, памяти, скорости начала воспроизведения и так далее).
Как итог, оба варианта всё ещё живы, а браузеры до сих пор не могут дочинить видео. Новое свойство позволит немного подтянуть анимированные картинки по возможностям.
controls для картинок?
Когда-то было обсуждение атрибута controls для картинок. Это позволило бы управлять воспроизведение картинок аналогично тегу <video>.
И в Хроме атрибута controls для картинок (пока) нет. Но кто бы мог подумать, этот атрибут завезли в Сафари 27! Правда, по совсем другой причине.
controls в Сафари нужен для visionOS. Другими словами, это не кнопки для паузы/воспроизведения анимации, это кнопки для перевода картинки в панорамный режим.
Будет ли релиз?
Недавно Хром перешёл на двухнедельный цикл разработки. Если раньше бета уходила на месяц вперёд, а canary на 2-3, то теперь разница между ветками уже не такая большая.
Что же с новым свойством? Оно заявлено к выходу в следующей 156й версии, но в самом свежем билде Хрома оно не работает. При этом canary версия и есть 156.
Инструменты разработчика частично поддерживают новое свойство (автокомплит есть, но про само свойство они говорят, что его нет). В трекере Хрома есть свежие ишью (про безопасность, например), но активного обсуждения я не нашёл.
Для меня всё это выглядит, как будто свойство выключили из-за каких-то проблем. Возможно, оно работает нестабильно, или не все вопросы были решены. Всё это наталкивает на мысль о переносе релиза?. Посмотрим.
Итого
Свойство image-animation звучит очень полезно. Возможность остановки анимации и продолжение воспроизведения по необходимости – очень крутая возможность, особенно для сайтов, в которых анимированных картинок много. Остаётся только добавить программное JS API и события.
Но вот что касается самого релиза, то тут выглядит не очень понятно. Что ж, подождём пару недель и увидим, осталось всего ничего.
Обсудить в Telegram
