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:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...