SVG keyTimes Attribute
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:
Please Login to comment...