<animate>

Базовый уровень Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она доступна во всех браузерах с ⁨января 2020⁩ года.

Подробнее
Посмотреть полную информацию о совместимости
Оставить отзыв

Элемент <animate> SVG позволяет анимировать атрибут элемента с течением времени.

Контекст использования

Категории	Элемент анимации
Допустимое содержимое	Любое количество следующих элементов в любом порядке: Описательные элементы

Атрибуты

Этот элемент поддерживает только глобальные атрибуты.

Интерфейс DOM

Этот элемент реализует интерфейс SVGAnimateElement.

Пример

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="10">
    <animate
      attributeName="rx"
      values="0;5;0"
      dur="10s"
      repeatCount="indefinite" />
  </rect>
</svg>

Вопросы доступности

Мигающая и мерцающая анимация может быть проблематичной для людей с когнитивными особенностями, такими как синдром дефицита внимания и гиперактивности (СДВГ). Кроме того, некоторые виды движения могут провоцировать вестибулярные расстройства, эпилептические приступы, мигрень и скотопическую чувствительность.

Рассмотрите возможность предоставить механизм приостановки или отключения анимации, а также использовать медиазапрос для уменьшения движения или соответствующую подсказку клиента User-Agent Sec-CH-Prefers-Reduced-Motion, чтобы обеспечить комфортное взаимодействие для пользователей, предпочитающих избегать анимации.

Спецификации

Спецификация
Анимации SVG, уровень 2> # AnimateElement>

Совместимость с браузерами

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`animate`	2	79	4	9	3.1	18	4	10.1	2	1.0	4	2
`attributeName`	2	79	4	15	4	18	4	14	3.2	1.0	4.4	3.2
`attributeType`	2	79	4	15	4	18	4	14	3.2	1.0	4.4	3.2
`dur`	2	79	4	15	4	18	4	14	3.2	1.0	4.4	3.2
`fill`	2	79	4	15	3.1	18	4	14	2	1.0	4.4	2
`from`	2	79	4	15	4	18	4	14	3.2	1.0	4.4	3.2
`href`	50	79	51	37	12.1	50	51	37	12.2	5.0	50	12.2
`repeatCount`	2	79	4	15	4	18	4	14	3.2	1.0	4.4	3.2
`systemLanguage`	2	79	12	≤12.1	3.1	18	14	≤12.1	2	1.0	4.4	2
`to`	2	79	4	15	4	18	4	14	3.2	1.0	4.4	3.2

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/animate