How Does SMIL repeatCount Handle Fractional Values?

Synchronized Multimedia Integration Language (SMIL) supports fractional floating-point values in the repeatCount attribute to allow animations to play for partial iterations before completing. When assigned a non-integer value such as 2.5 or 0.75, the animation engine calculates the total active duration by multiplying the simple duration by the specified fractional count, halting playback precisely midway through the final cycle.

The Mechanics of Fractional repeatCount

In SMIL and SVG animation elements (such as <animate>, <animateTransform>, and <set>), the repeatCount attribute defines how many times an animation cycle should execute. The SMIL specification explicitly defines repeatCount as accepting a non-negative floating-point value, rather than restricting it to whole integers.

When a fractional value is defined, the active duration of the animation element is calculated using the following formula:

Active Duration = simple duration × repeatCount

For example, if an animation has an intrinsic simple duration of 4 seconds (dur="4s") and specifies repeatCount="2.5", the timeline executes as follows:

1. First iteration: Plays from 0% to 100% (seconds 0 to 4).
2. Second iteration: Plays from 0% to 100% (seconds 4 to 8).
3. Third iteration: Plays from 0% to 50% (seconds 8 to 10).
4. End of active duration: The animation terminates at the 10-second mark.

Behavior at Termination: fill="freeze" vs. fill="remove"

The visual outcome at the end of a partial animation cycle depends on the fill attribute:

• fill="freeze": The animated element preserves the interpolated property value at the exact cutoff point. In a repeatCount="2.5" translation moving from 0px to 100px, the element freezes at 50px.
• fill="remove" (default): Upon reaching the active duration boundary, the animated property resets to its original baseline state defined prior to the animation start.

SVG SMIL Example

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="30" height="30" fill="royalblue">
    <!-- Plays 2 full cycles and one half cycle over 5 seconds total -->
    <animate 
      attributeName="x" 
      from="10" 
      to="110" 
      dur="2s" 
      repeatCount="2.5" 
      fill="freeze" />
  </rect>
</svg>

In this example, the rectangle moves horizontally across a 100-pixel path over 2 seconds per cycle. Because repeatCount is set to 2.5, it travels across twice, returns to start, moves to the halfway point (x = 60), and freezes in place.

Sub-One Values and Edge Cases

A fractional repeatCount can also be less than 1.0. Setting repeatCount="0.25" on an element with dur="8s" results in an active duration of 2 seconds, playing only the first quarter of the declared keyframes or interpolation curve.

If both repeatDur and repeatCount are defined on the same element, SMIL dictates that the active duration ends at whichever constraint is reached first.