CODEWITHSUNDEEP
animationsvg
JoSSte
JoSSte

Reputation: 3372

SVG animation: Delaying before repeating

I am trying to create an animation to ask users to rotate their phone.

I have made it rotate 90 degrees without issue, but i can't figure out how to make it delay for 0.2s before repeating. this is what i have so far (rectangle substitues the phone path for simplicity)

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

Upvotes: 1

Views: 420

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

You can use values rather than from/to to provide more values. And then keyTimes to explain when to use them.

Something like this...

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

Upvotes: 1

Related Questions