VOOZH about

URL: https://www.geeksforgeeks.org/html/svg-keytimes-attribute/

⇱ SVG keyTimes Attribute - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

SVG keyTimes Attribute

Last Updated : 23 Jul, 2025

The keyTimes attribute is used to specify a list of floating point numbers (Time values) between 0 and 1 (inclusive) which is used to control the pacing of the animation. The elements that are using this attribute includes <animate>, <animateColor>, <animateMotion>, and <animateTransform>.

Syntax:

keyTimes = [;<number>]*

Attribute Values:

The keyTimes attribute accepts the values mentioned above and described below.

  • [;<number>]*: It is a list of numbers between 0 and 1 separated by semi-colon.

Note: The default value for the keyTimes attribute is none

The below examples illustrate the use of keytimes attribute.

Example 1:

Output:


Example 2:

Output:

Comment