CSS animation-range — синтаксис и примеры
CSS-свойство animation-range: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Назначение и границы
Назначение «animation-range» раскрывается через задачу «изменять визуальное положение или переход между состояниями интерфейса». Свойство animation-range относится к области «движение и преобразования» и обычно работает после раскладки и требует учёта prefers-reduced-motion. Для воспроизводимой проверки «animation-range» используйте пример в интерфейсе с направлением письма справа налево и наблюдайте изменение DOM в панели Elements.
Рабочий критерий для «animation-range»: проверьте вычисленное значение animation-range, наследование и контекст родителя. Если результат «animation-range» меняется вместе с посторонним условием, пример ещё не изолирован.
Синтаксис animation-range
Пример «animation-range» оставляет только контекст, необходимый для области «движение и преобразования». Измените одно значение и проследите результат в браузере.
.demo {
animation-range: pulse 1s ease-in-out infinite alternate;
}Как работает animation-range
Браузер обрабатывает «animation-range» в контексте области «движение и преобразования»: свойство animation-range относится к области «движение и преобразования» и обычно работает после раскладки и требует учёта prefers-reduced-motion. Для «animation-range» наблюдения через изменение DOM в панели Elements и результат при отключённом JavaScript отделяют исходное условие от результата.
Проверка в проекте
- Проверьте вычисленное значение animation-range, наследование и контекст родителя; результат относится непосредственно к «animation-range».
- Проверить Chrome, Firefox и Safari для новой или экспериментальной возможности при разборе «animation-range».
- Проверьте «animation-range» в интерфейсе с направлением письма справа налево через изменение DOM в панели Elements и запишите наблюдаемое изменение.
Критерий выбора «animation-range» — предсказуемая работа в заявленном контексте. Для «animation-range» подтвердите её через изменение DOM в панели Elements и соблюдите ограничение: проверяйте и светлую, и тёмную цветовую схему.
Практика с animation-range
Соберите «animation-range» в тестовом шаблоне и проверьте предметное условие: проверьте вычисленное значение animation-range, наследование и контекст родителя. Затем для «animation-range» замените содержимое длинным и сузьте контейнер до 320 px.
Сценарий: в интерфейсе с направлением письма справа налево.
Ошибки при работе с animation-range
Доступность
Изолированная декларация animation-range без связанных ограничений может дать другой результат в реальном компоненте — это предметный риск для «animation-range».
Каскад
Оптимизация кода до проверки корректности и доступности при использовании «animation-range».
Поддержка
Отсутствие запасного поведения при неподдерживаемой возможности; для «animation-range» проверьте это отдельно.
Поддержка animation-range
Для «animation-range» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «animation-range»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о animation-range
Как понять, что «animation-range» выбрано правильно?
«animation-range» выбрано правильно, когда оно решает задачу «изменять визуальное положение или переход между состояниями интерфейса», сохраняет результат в интерфейсе с направлением письма справа налево и проходит предметную проверку: проверьте вычисленное значение animation-range, наследование и контекст родителя.
Нужен ли запасной вариант для «animation-range»?
Запасной вариант для «animation-range» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «animation-range» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.