SVG keyTimes Attribute
Last Updated :
31 Mar, 2022
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
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green; margin-left: 35px;">
GeeksforGeeks
</h1>
<svg viewBox="-10 80 620 120"
<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"
<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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...