O atributokeyTimes representa uma lista de valores de tempo usados para controlar o ritmo da animação. Cada valor corresponde a um valor na lista de atributosvalues e define quando o valor é usado na animação. Cada valor de tempo na listakeyTimes é especificado como um valor de ponto flutuante entre 0 e 1 (inclusive), representando um deslocamento proporcional na duração do elemento de animação.

Four elements are using this attribute:<animate>,<animateColor>,<animateMotion>, and<animateTransform>

html,body,svg {  height: 100%;}

<svg viewBox="0 0 120 120" xmlns="https://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

The value of thekeyTimes attribute is a semicolon-separated list of values.

There must be exactly as many values in thekeyTimes list as in thevalues list.

Each successive time value must be greater than or equal to the preceding time value.

ThekeyTimes 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 be1. 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 be0. 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 thecalcMode attribute is set topaced, thekeyTimes attribute is ignored.

If the duration of the animation is indefinite, anykeyTimes specification will be ignored.

Especificações

Compatibilidade com navegadores