keyTimes

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

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

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

• <animate>
• <animateMotion>
• <animateTransform>

Пример

<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>

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

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

Количество значений в списке keyTimes должно точно совпадать с количеством значений в списке values.

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

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

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

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

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

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

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