---
title: keyTimes
slug: Web/SVG/Attribute/keyTimes
translation_of: Web/SVG/Attribute/keyTimes
---
<div>{{SVGRef}}</div>

<p>O atributo <code><strong>keyTimes</strong></code> representa uma lista de valores de tempo usados ​​para controlar o ritmo da animação. Cada valor corresponde a um valor na lista de atributos {{SVGAttr("values")}} e define quando o valor é usado na animação. Cada valor de tempo na lista <code>keyTimes</code> é especificado como um valor de ponto flutuante entre 0 e 1 (inclusive), representando um deslocamento proporcional na duração do elemento de animação.</p>

<p>Four elements are using this attribute: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, and {{SVGElement("animateTransform")}}</p>

<div id="topExample">
<div class="hidden">
<pre class="brush: css">html, body, svg {
  height: 100%;
}</pre>
</div>

<pre class="brush: html; highlight[4,6]">&lt;svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;circle cx="60" cy="10" r="10"&gt;
    &lt;animate attributeName="cx" dur="4s" repeatCount="indefinite"
        values="60 ; 110 ; 60 ; 10 ; 60" keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/&gt;
    &lt;animate attributeName="cy" dur="4s" repeatCount="indefinite"
        values="10 ; 60 ; 110 ; 60 ; 10" keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/&gt;
  &lt;/circle&gt;
&lt;/svg&gt;</pre>

<p>{{EmbedLiveSample("topExample", "200", "200")}}</p>
</div>

<h2 id="Usage_notes">Usage notes</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Value</th>
   <td>{{cssxref("number")}} [ <code>;</code> {{cssxref("number")}} ]* <code>;</code>?</td>
  </tr>
  <tr>
   <th scope="row">Default value</th>
   <td><em>None</em></td>
  </tr>
  <tr>
   <th scope="row">Animatable</th>
   <td>No</td>
  </tr>
 </tbody>
</table>

<p>The value of the <code>keyTimes</code> attribute is a semicolon-separated list of values.</p>

<p>There must be exactly as many values in the <code>keyTimes</code> list as in the <code>values</code> list.</p>

<p>Each successive time value must be greater than or equal to the preceding time value.</p>

<p>The <code>keyTimes</code> list semantics depends upon the interpolation mode:</p>

<ul>
 <li>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 <code>1</code>. The key time associated with each value defines when the value is set; values are interpolated between the key times.</li>
 <li>For discrete animation, the first time value in the list must be <code>0</code>. 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.</li>
</ul>

<p>If the {{SVGAttr("calcMode")}} attribute is set to <code>paced</code>, the <code>keyTimes</code> attribute is ignored.</p>

<p>If the duration of the animation is indefinite, any <code>keyTimes</code> specification will be ignored.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("SVG Animations 2", "#KeyTimesAttribute", "keyTimes")}}</td>
   <td>{{Spec2("SVG Animations 2")}}</td>
   <td>No change</td>
  </tr>
  <tr>
   <td>{{SpecName("SVG1.1", "animate.html#KeyTimesAttribute", "keyTimes")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("svg.elements.animate.keyTimes")}}</p>