The keyTimes attribute is an SVG animation attribute that defines when values change during an animation. It works alongside keySplines or values to control timing segments for SMIL animations, and can influence how an SVG element progresses through its states in the browser.
How keyTimes shapes SVG animation timing
The keyTimes attribute divides an animation into timing checkpoints, telling the browser when each value in an SVG animation should take effect. That makes it a timing-control mechanism rather than a visual effect on its own. By pairing with values or keySplines, it helps define whether an animation moves evenly, pauses, or jumps between states.
How keyTimes works with values and keySplines
In SMIL-based SVG animation, keyTimes is usually interpreted alongside a matching set of values. Each number in the list maps to a point along the animation timeline, typically from 0 to 1, and the list must align with the number of animation values. keySplines can then refine the pacing between those points, which means the attribute often acts as the timeline skeleton while the spline data adds easing behaviour.
This separation matters because keyTimes does not define the visible result directly. It defines structure: where each segment starts and ends, how long each segment lasts, and whether the motion appears compressed into short bursts or spread evenly across the duration. In practice, it is most useful when the designer needs explicit control over multi-step transitions.
What keyTimes changes in the browser
Browsers use keyTimes to decide how animation progress is distributed across segments. If the values are evenly spaced, the element appears to transition at a steady pace. If the values cluster near one end of the scale, the animation may linger on one state and then move rapidly through later states. That makes the attribute important for sequencing, pacing, and state progression in SVG motion.
The effect is especially visible in animations with several intermediate states. Instead of treating the motion as one continuous interpolation, the browser uses the declared timing checkpoints to determine when each state should be reached. This is why keyTimes is often discussed with other timing attributes rather than as a standalone feature.
Common authoring constraints and compatibility considerations
keyTimes is sensitive to list alignment and timing logic. The number of timing entries must correspond to the animated value sequence, and the numbers must describe a valid progression across the animation duration. If the timing list and value list do not match, the animation may fail to behave as intended or may be ignored by the renderer.
Support and behaviour can also vary by browser implementation, especially because SMIL animation has had a mixed history across platforms. For that reason, authors often test carefully when using keyTimes for production motion design, particularly if the animation is important to user experience or presentation consistency.
Risk and Threat Considerations
keyTimes itself is not a security control, but it can matter in security-sensitive SVG handling because SVG content is executable in the rendering pipeline of many browsers and applications. If untrusted SVG is accepted, animation behaviour can become part of a broader content-security or parsing problem, especially when organisations assume SVG is only static artwork.
Failure mechanism: Misjudging SVG as inert content can lead teams to allow dynamic markup, animation, or embedded script-adjacent behaviour in places where sanitisation, content restrictions, or safe rendering were expected.
Impact: The result can be unexpected browser-side behaviour, broken sanitisation assumptions, or a wider attack surface around SVG upload, rendering, or transformation workflows.
Standards & Framework Alignment
This section maps relevant standards and security frameworks to the operational risks and controls described in this guidance.
OWASP ASVS, CIS Controls v8 and NIST SP 800-53 Rev 5 set the governance and control requirements practitioners need to meet.
| Framework | Control / Reference | Relevance |
|---|---|---|
| OWASP ASVS | V13 — Configuration | SVG animation behavior is influenced by secure content configuration and rendering constraints. |
| Recommendation — Restrict allowed SVG features and validate animation-related markup before rendering. | ||
| CIS Controls v8 | CIS-16 — Application Software Security | SVG content handling is an application security concern when user-controlled files are rendered. |
| Recommendation — Sanitize and test SVG handling to prevent unsafe browser-side content execution. | ||
| NIST SP 800-53 Rev 5 | SI-10 — Information Input Validation | User-supplied SVG with animation attributes requires validation before processing or display. |
| Recommendation — Validate SVG input and reject unsafe markup before it reaches the renderer. | ||
Practitioner Guidance
What to watch for: Treat keyTimes as part of the full SVG feature set you are permitting, not as a harmless formatting detail. If SVG is user-supplied, verify that your sanitisation and rendering policies account for animation features as well as paths, text, and images.
Practitioner takeaway: If the animation does not need precise segment timing, remove the complexity. Simpler SVG often means fewer compatibility surprises and a smaller security review burden.
Related resources from NHI Mgmt Group
Deepen Your Knowledge
Free weekly newsletter
Subscribe to the NHI & AI Identity Journal
The latest on NHI and Agentic AI security – articles, research, breaches, news and events every week.
Bonus 33% off our NHI Course when you subscribe.
Reviewed and updated by the NHIMG editorial team on November 3, 2026.
NHI Mgmt Group — the #1 independent authority on Non-Human Identity, IAM, and Agentic AI security. nhimg.org