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:

HTML
<!DOCTYPE html>
<html>

<body>
  <h1 style="color: green; margin-left: 35px;">
    GeeksforGeeks
  </h1>

  <svg viewBox="-10 80 620 120" 
       xmlns="https://www.w3.org/2000/svg">

    <polygon fill="green" points="55.724, 
            91.297 41.645, 91.297 36.738, 
            105.038 47.483, 105.038 41.622,
            124.568 62.783, 98.526 51.388, 
            98.526" />

    <animate attributeType="CSS" 
             attributeName="visibility" 
             values="hidden;visible;hidden" 
             keyTimes="0; 0.75; 1"
      		 dur="1s" repeatCount="indefinite" />
  </svg>
</body>

</html>

Output:


Example 2:

HTML
<!DOCTYPE html>
<html>

<body>
    <h1 style="color: green; margin-left: 35px;">
        GeeksforGeeks
    </h1>

    <svg viewBox="0 0 620 120" 
        xmlns="https://www.w3.org/2000/svg">
        
        <circle cx="60" cy="10" r="10" fill="green">
            <animate attributeName="cx" dur="2s" 
                repeatCount="indefinite" 
                values="60 ; 110 ; 60 ; 10 ; 60"
                keyTimes="0 ; 0.3 ; 0.6 ; 0.80 ; 1" />
        </circle>
    </svg>
</body>

</html>

Output:

Comment

Explore