RepeatCount vs RepeatDur in SMIL: What Is the Difference?

In Synchronized Multimedia Integration Language (SMIL) and SVG animations, repeatCount and repeatDur both control how long an animation loops, but they determine the ending condition through different metrics. While repeatCount specifies repetition based on the exact number of cycles completed, repeatDur defines the total clock time during which the animation is allowed to repeat. Choosing between them dictates whether an animation finishes cleanly at the end of a full loop or stops strictly when a specific duration elapses.

Defining the Parameters

Both attributes are part of the SMIL timing model used within SVG animation elements such as <animate>, <animateTransform>, and <animateMotion>.

The repeatCount Attribute

The repeatCount attribute defines the number of iterations an animation executes.

• Syntax: Accepts a positive floating-point number (e.g., repeatCount="3", repeatCount="2.5") or the keyword "indefinite".
• Behavior: If set to an integer like 3, the animation runs through its simple duration (dur) exactly three times from start to finish. If set to a fractional number like 2.5, it runs twice fully and stops halfway through the third cycle.
• Total Time Calculation: The total active repeat time is determined by multiplying repeatCount by dur.

The repeatDur Attribute

The repeatDur attribute specifies the total accumulated clock time for which the animation is permitted to repeat.

• Syntax: Accepts a standard clock value (e.g., repeatDur="10s", repeatDur="01:30") or the keyword "indefinite".
• Behavior: The animation begins repeating its standard cycle and continues until the total elapsed time reaches the specified repeatDur. If repeatDur does not divide evenly by dur, the animation cuts off mid-cycle as soon as the time limit expires.

Key Functional Differences

The practical differences between both attributes appear most clearly across cycle alignment, timing dependencies, and interaction when used together.

Cycle Alignment and Truncation

• repeatCount ensures cycle integrity: When configured with whole numbers, it guarantees the animation always ends on the final keyframe or resting state.
• repeatDur prioritizes time constraints: It ensures the animation stops precisely at a time boundary, often leaving the animated element frozen mid-motion if the duration runs out before a cycle concludes.

Behavior When Duration (dur) Changes

• With repeatCount, changing the base animation duration (dur="2s" to dur="4s") changes the overall active playback duration from 6 seconds to 12 seconds for repeatCount="3".
• With repeatDur="10s", changing dur alters only how many individual loops fit within that fixed 10-second window, keeping total runtime constant.

Combining repeatCount and repeatDur

When both repeatCount and repeatDur are defined on the same animation element, SMIL rules dictate that the active repetition period ends at whichever constraint is reached first.

For example, consider an element with dur="2s", repeatCount="5", and repeatDur="6s":

• repeatCount="5" targets a total runtime of 10 seconds (5 cycles × 2 seconds).
• repeatDur="6s" limits the runtime to 6 seconds.

Because 6 seconds is shorter than 10 seconds, the animation stops repeating after 6 seconds (completing exactly 3 cycles).