keyTimes
SVG Elements
- A
- B-C
- D
- E
- F
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feDistantLight>
<feFlood>
<feFuncA>
<feFuncB>
<feFuncG>
<feFuncR>
<feGaussianBlur>
<feImage>
<feMerge>
<feMergeNode>
<feMorphology>
<feOffset>
<fePointLight>
<feSpecularLighting>
<feSpotLight>
<feTile>
<feTurbulence>
<filter>
<font>
<font-face>
<font-face-format>
<font-face-name>
<font-face-src>
<font-face-uri>
<foreignObject>
- G
- H
- I
- J-L
- M
- N-P
- Q-R
- S
- T
- U
- V-Z
The keyTimes
attribute represents a list of time values used to control the pacing of the animation.
Each time in the list corresponds to a value in the values
attribute list, and defines when the value is used in the animation. Each time value in the keyTimes
list is specified as a floating point value between 0 and 1 (inclusive), representing a proportional offset into the duration of the animation element.
You can use this attribute with the following SVG elements:
Example
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="10" r="10">
<animate attributeName="cx" dur="4s" repeatCount="indefinite"
values="60; 110; 60; 10; 60" keyTimes="0; 0.25; 0.5; 0.75; 1"/>
<animate attributeName="cy" dur="4s" repeatCount="indefinite"
values="10; 60; 110; 60; 10" keyTimes="0; 0.25; 0.5; 0.75; 1"/>
</circle>
</svg>
Usage notes
Value |
<number> [
; <number> ]* ; ?
|
---|---|
Default value | None |
Animatable | No |
The value of the keyTimes
attribute is a semicolon-separated list of values.
There must be exactly as many values in the keyTimes
list as in the values
list.
Each successive time value must be greater than or equal to the preceding time value.
The keyTimes
list semantics depends upon the interpolation mode:
- For linear and spline animation, the first time value in the list must be 0, and the last time value in the list must be
1
. The key time associated with each value defines when the value is set; values are interpolated between the key times. - For discrete animation, the first time value in the list must be
0
. The time associated with each value defines when the value is set; the animation function uses that value until the next time defined in the list.
If the calcMode
attribute is set to paced
, the keyTimes
attribute is ignored.
If the duration of the animation is indefinite, any keyTimes
specification will be ignored.
- Safari issue:
keyTimes
values should be separated with semicolon without space before, f.e:keyTimes="0; 0.25; 0.5; 0.75; 1"
Specifications
Specification | Status | Comment |
---|---|---|
SVG Animations Level 2 The definition of 'keyTimes' in that specification. |
Editor's Draft | No change |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'keyTimes' in that specification. |
Recommendation | Initial definition |
Browser compatibility
No compatibility data found for svg.elements.animate.keyTimes
.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.