SVG анимация: задержка перед повторением

Question

Я пытаюсь создать анимацию, чтобы попросить пользователей повернуть свой телефон.

Я заставил его повернуть на 90 градусов без проблем, но я не могу понять, как сделать задержку на 0,2 с раньше повторение. это то, что у меня есть (прямоугольник заменяет телефонный путь для простоты)

<svg>

  <animateTransform
     attributeType="xml"
     attributeName="transform"
     type="rotate"
     from="0 0 0"
     to="90 0 0"
     begin="0s"
     dur="0.85s"
     additive="sum"
     repeatCount="indefinite"
     fill="freeze" />
  <rect
     style="fill:#888;"
     id="rect"
     width="60"
     height="40"
     x="45"
     y="-95"
     transform="rotate(90)" />
</svg>

Answer 1

Вы можете использовать значения, а не от / до, чтобы предоставить больше значений. А затем keyTimes, чтобы объяснить, когда их использовать.

Примерно так ...

<svg>

  <animateTransform
     attributeType="xml"
     attributeName="transform"
     type="rotate"
     values="0; 90; 90"
     keyTimes="0; 0.25; 1"
     begin="0s"
     dur="1.5s"
     additive="sum"
     repeatCount="indefinite"
     fill="freeze" />
  <rect
     style="fill:#888;"
     id="rect"
     width="60"
     height="40"
     x="45"
     y="-95"
     transform="rotate(90)" />
</svg>