1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
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>
|
