SVG Animation, SMIL & Dynamic Motion Glossary (40+ Terms)

<animate attributeName="opacity" from="0" to="1" dur="0.5s" fill="freeze" />

The fundamental SMIL element used to animate a single numerical, color, or string attribute of a parent SVG element over a specified duration.

<animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="2s" repeatCount="indefinite" />

Animates a transformation attribute (translate, scale, rotate, skewX, skewY) on a target SVG element while properly managing the transform list hierarchy.

<animateMotion path="M 0 0 Q 50 -30 100 0 T 200 0" dur="4s" rotate="auto" repeatCount="indefinite" />

Causes a referenced SVG graphical element to physically translate along an arbitrary vector path described by a path string or sub-element.

<set attributeName="visibility" to="visible" begin="triggerBtn.click" dur="3s" />

A lightweight convenience element for applying non-interpolated, discrete attribute changes (such as toggling visibility, display, or color) at a specific point in time.

<animateMotion dur="6s" repeatCount="indefinite">
  <mpath href="#flightTrajectoryPath" />
</animateMotion>

A sub-element placed inside that references an external or defined element by its ID via the href attribute.

<discard begin="10s" />

An SVG 2 declarative element that completely removes its parent element from the DOM tree when a specific timing clock condition is met.

dur="1.5s" | dur="750ms" | dur="indefinite" | dur="media"

Defines the simple duration of the animation cycle. Accepts standard clock values (hours, minutes, seconds, milliseconds) or 'indefinite'.

begin="0s; 4s" | begin="click" | begin="btn.mouseover+200ms" | begin="animA.end"

Specifies when an animation should start. Supports clock offsets, semi-colon-separated lists, DOM events, accesskeys, and syncbase cross-element dependencies.

end="10s" | end="mouseout" | end="cancelBtn.click"

Specifies an explicit end time or trigger that forcibly halts the animation, overriding any remaining duration or repeat count cycles.

repeatCount="3" | repeatCount="indefinite" | repeatCount="2.5"

Specifies the number of iterations the animation should loop through. Can accept positive integers, fractional counts, or 'indefinite'.

repeatDur="01:30" | repeatDur="15s" | repeatDur="indefinite"

Defines the total wallclock time across which an animation will continue repeating its cycles before stopping.

fill="freeze" | fill="remove"

Determines whether the target attribute retains its final interpolated value ('freeze') or reverts back to its pre-animation initial state ('remove') upon completion.

restart="always" | restart="whenNotActive" | restart="never"

Controls whether an animation can be restarted while it is currently active. 'always' restarts on trigger; 'whenNotActive' ignores triggers until finished.

min="2s" max="8s"

Clamps the minimum and maximum active duration of an animation regardless of how begin, dur, or end event triggers resolve.

calcMode="discrete" | calcMode="linear" | calcMode="paced" | calcMode="spline"

Specifies the mathematical method used to interpolate attribute values across keyframes: discrete (step), linear, paced (constant speed), or spline (bezier).

<animate calcMode="discrete" values="red; blue; green" dur="3s" />

Skips all intermediate interpolation, instantaneously jumping from one value to the next at each keyframe boundary.

<animate calcMode="linear" values="0; 50; 100" dur="2s" />

Default interpolation mode. Divides animation time into equal segments and calculates values using straight linear interpolation between points.

<animateMotion calcMode="paced" path="..." dur="5s" />

Ignores keyTimes and automatically calculates timing to ensure a strictly constant velocity across segments of varying spatial lengths.

<animate calcMode="spline" keyTimes="0; 1" keySplines="0.4 0 0.2 1" values="0; 100" dur="1s" />

Interpolates values using custom cubic bezier curve easing functions defined by the keySplines attribute.

keyTimes="0; 0.25; 0.75; 1"

A semi-colon-separated list of floating-point numbers between 0.0 and 1.0 that specify the normalized timeline points for each corresponding value.

keySplines="0.42 0 0.58 1; 0.25 0.1 0.25 1"

A semi-colon-separated list of cubic bezier control points (x1 y1 x2 y2) defining the easing curve for each interval between keyTimes.

keyPoints="0; 0.3; 0.9; 1"

Used in with calcMode='linear' or 'spline' to specify the precise distance progress (0.0 to 1.0) along the motion path at each keyTime.

attributeName="d" | attributeName="stroke-dashoffset" | attributeName="transform"

Identifies the exact XML or CSS attribute on the parent SVG element that the animation will modify.

attributeType="CSS" | attributeType="XML" | attributeType="auto"

Specifies whether the target attribute belongs to the XML attribute namespace, CSS presentation properties, or should be automatically resolved ('auto').

values="#000; #C1DD2D; #FFF; #C1DD2D"

A semi-colon-separated list of two or more values defining the complete sequence of states the attribute will transition through.

from="100" to="0"

Defines the exact starting value ('from') and ending value ('to') for a two-point linear or spline animation.

by="15" | by="180"

Specifies a relative offset value to add to the starting state, rather than defining an absolute destination.

additive="replace" | additive="sum"

Controls whether the animated value replaces the underlying target value ('replace', default) or adds to it algebraically ('sum').

accumulate="none" | accumulate="sum"

Controls whether repeated animation cycles start over from the initial value ('none') or build cumulatively upon the previous cycle's end value ('sum').

transform-origin: 50% 50% | transform-origin: 12px 12px

The point in SVG coordinate space around which scale and rotation transformations are calculated.

transform-box: fill-box | transform-box: view-box

Specifies the reference box for transform and transform-origin calculations. 'fill-box' references the target element; 'view-box' references the SVG canvas.

offset-path: path("M 20 20 C 40 10, 60 10, 80 20");

A modern CSS property that defines an arbitrary vector trajectory for an element to follow, superseding SMIL .

offset-distance: 0% --> offset-distance: 100%

Specifies the position of the element along the defined offset-path, typically animated from 0% to 100% via CSS keyframes.

offset-rotate: auto | offset-rotate: auto 90deg | offset-rotate: reverse

Defines the orientation of the animated element as it travels along its offset-path. 'auto' aligns the element tangent to the curve.

stroke-dasharray="100"; stroke-dashoffset="100" --> 0

The industry-standard technique for animating vector strokes so they appear to self-draw. dasharray defines line/gap lengths, while dashoffset moves the pattern.

d: path("M 4 7 L 20 7"); | clip-path: path("M 0 0 L 100 0 ... Z");

A native CSS shape function that allows SVG path data strings to be used directly inside CSS properties like d, clip-path, and offset-path.

will-change: transform, opacity, d;

Informs the browser rendering engine that an SVG property will undergo animation, prompting the engine to allocate an isolated GPU compositor layer.

syncMaster="true"

Designates an animation element as the authoritative master clock for its entire synchronization group.

rotate="auto" | rotate="auto-reverse" | rotate="30"

Controls element orientation during . 'auto' faces the direction of travel; 'auto-reverse' faces backward.

begin="wallclock(2026-09-09T20:00:00Z)"

A SMIL timing function that triggers an SVG animation at an absolute real-world calendar date and UTC time.

@media (prefers-reduced-motion: reduce) { ... }

A CSS media query that detects whether the operating system user has requested minimal non-essential animation.