diff options
Diffstat (limited to 'files/pt-br/web/svg/attribute/keytimes/index.html')
| -rw-r--r-- | files/pt-br/web/svg/attribute/keytimes/index.html | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/files/pt-br/web/svg/attribute/keytimes/index.html b/files/pt-br/web/svg/attribute/keytimes/index.html new file mode 100644 index 0000000000..5d2e3a2e46 --- /dev/null +++ b/files/pt-br/web/svg/attribute/keytimes/index.html @@ -0,0 +1,95 @@ +--- +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]"><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></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> |