keyTimes

Атрибут keyTimes представляет собой список значений времени, используемых для управления скоростью анимации.

Каждое время в списке соответствует значению в списке атрибута values, и определяет, когда значение используется в анимации. Каждое значение времени в списке keyTimes задаётся как число с плавающей точкой от 0 до 1 (включительно), представляющее собой пропорциональное смещение во времени элемента анимации.

Вы можете использовать этот атрибут со следующими элементами SVG:

Пример

html

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="10" r="10">
    <animate
      attributeName="cx"
      dur="4s"
      repeatCount="indefinite"
      values="60; 110; 60; 10; 60"
      keyTimes="0; 0.25; 0.5; 0.75; 1" />
    <animate
      attributeName="cy"
      dur="4s"
      repeatCount="indefinite"
      values="10; 60; 110; 60; 10"
      keyTimes="0; 0.25; 0.5; 0.75; 1" />
  </circle>
</svg>

Примечания по использованию

Значение	`<number>` [ `;` `<number>` ]* `;`?
Значение по умолчанию	Нет
Анимируемо	Нет

Значение атрибута keyTimes представляет собой список значений, разделённых точкой с запятой.

В списке keyTimes должно быть ровно столько значений, сколько в списке values.

Каждое последующее значение времени должно быть больше или равно предыдущему значению времени.

Семантика списка keyTimes зависит от режима интерполяции:

Для линейной и сплайновой анимации первое значение времени в списке должно быть 0, а последнее — 1. Значение времени, связанное с каждым значением, определяет, когда устанавливается значение; значения интерполируются между ключевыми точками времени.
Для дискретной анимации первое значение времени в списке должно быть 0. Время, связанное с каждым значением, определяет, когда устанавливается значение; функция анимации использует это значение до следующего определённого в списке времени.

Если атрибут calcMode установлен на paced, атрибут keyTimes игнорируется.

Если продолжительность анимации неопределённа, любое указание keyTimes будет проигнорировано.

Проблема в Safari: значения keyTimes должны быть разделены точкой с запятой без пробела перед ней, например: keyTimes="0; 0.25; 0.5; 0.75; 1"

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

Спецификация
SVG Animations Level 2 # KeyTimesAttribute

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