Skip to content
Related Articles

Related Articles

SVG keyTimes Attribute
  • Last Updated : 16 Dec, 2020

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

Below examples illustrates the use of keytimes attribute.



Example 1:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green; margin-left: 35px;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="-10 80 620 120" 
        xmlns="http://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>

chevron_right


Output:

Example 2:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green; margin-left: 35px;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="0 0 620 120" 
        xmlns="http://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>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :