Skip to main content

🗓️ 23022025 2313
📎

css_siml

Basic <animate> Structure​

The <animate> element allows you to animate properties of an SVG element.

<svg width="200" height="100">
  <circle cx="20" cy="50" r="10" fill="blue">
    <animate attributeName="cx" to="180" dur="1s" fill="freeze" />
  </circle>
</svg>

<animate> Attributes​

AttributeDescription
attributeNameThe property being animated (e.g., cx, fill, opacity).
toThe final value of the animation.
fromThe starting value (optional).
durDuration of the animation (e.g., 1s, 500ms).
beginWhen the animation starts (click, mouseover, etc.).
repeatCountHow many times the animation repeats (indefinite for infinite).
fillWhat happens after the animation (freeze to hold the last frame).
valuesDefines multiple steps instead of just from → to.
keyTimesSpecifies when each step in values should occur (0 → 1).
calcModeControls interpolation (linear, discrete, spline, paced).

Event-Based Animation with begin​

<rect x="10" y="10" width="30" height="30" fill="red">
  <animate attributeName="x" to="150" dur="1s" begin="click" />
</rect>

Possible begin Mouse Events​

Mouse EventDescription
clickelement is clicked
mousedownwhen the mouse button is pressed
mouseupwhen the mouse button is released
mouseoverwhen mouse enters - bubbles
mouseoutwhen mouse leaves - bubbles
mouseenterwhen mouse enters - no bubbles
mouseleavewhen mouse leaves - no bubbles
mousemoveStarts animation when the mouse moves over the element.

bubbles - triggered for the element and all its nested elements

Chaining animations​

<circle cx="50" cy="50" r="10" fill="blue">
  <animate attributeName="cx" to="150" dur="1s" />
  <animate attributeName="r" to="20" dur="0.5s" begin="mouseover" />
</circle>

Advanced: Keyframe Animations​

Use values for multi-step animations.

<rect x="10" y="50" width="30" height="30" fill="green">
  <animate
    attributeName="x"
    values="10; 50; 90; 130"
    dur="2s"
    repeatCount="indefinite"
  />
</rect>

Pause & Resume Animation​

<circle cx="50" cy="50" r="10" fill="blue">
  <animate
    id="myAnim"
    attributeName="cx"
    to="150"
    dur="1s"
    begin="start.click"
  />
</circle>
<text x="10" y="90" fill="black" font-size="16" id="start">▶ Start</text>
<text x="60" y="90" fill="black" font-size="16" id="stop">⏸ Stop</text>
<set attributeName="begin" to="indefinite" id="pauseAnim" />
<set attributeName="begin" to="indefinite" id="resumeAnim" />

References