---
title: keyTimes
slug: Web/SVG/Attribute/keyTimes
translation_of: Web/SVG/Attribute/keyTimes
---
<p>« <a href="/en-US/docs/Web/SVG/Attribute" title="en-US/docs/Web/SVG/Attribute">SVG Attribute reference home</a></p>

<p><code>keyTimes</code> 속성은 애니메이션의 pacing을 제어하는 데 사용되는 세미콜론으로 구분 된 시간 값 목록입니다. 목록의 각 시간은 {{ SVGAttr("values") }} 속성 목록의 값에 해당하며 애니메이션에서 값이 사용되는 시기를 정의합니다. <code>keyTimes</code> 목록의 각 시간 값은 0과 1 사이의 부동 소수점 값으로 지정되며 애니메이션 요소의 지속 시간에 대한 비례 오프셋을 나타냅니다. </p>

<p>만약 <code>keyTimes</code> 목록이 지정될 경우,  {{ SVGAttr("values") }} 목록에서와 같이 <code>keyTimes</code> 목록에 있는 값과 정확하게 일치해야합니다.</p>

<p>각 연속적인 시간 값은 이전 시간 값보다 크거나 같아야 합니다.</p>

<p><code>keyTimes</code> 목록의 semantics는 interpolation 모드에 따라 다릅니다.</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 1. 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 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 <code>keyTimes</code>.</li>
</ul>

<p>If the interpolation mode is <em>paced</em>, the <code>keyTimes</code> attribute is ignored.</p>

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

<h2 id="Usage_context">Usage context</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Categories</th>
   <td>Animation value attribute</td>
  </tr>
  <tr>
   <th scope="row">Value</th>
   <td>&lt;list&gt;</td>
  </tr>
  <tr>
   <th scope="row">Animatable</th>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Normative document</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>

<h2 id="예제">예제</h2>

<pre class="brush: html">&lt;?xml version="1.0"?&gt;
&lt;svg width="120" height="120"
     viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg"&gt;

    &lt;circle cx="60" cy="10" r="10"&gt;

        &lt;animate attributeName="cx"
                 attributeType="XML"
                 dur="4s"
                 values="60 ; 110 ; 60 ; 10 ; 60"
                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
                 repeatCount="indefinite"/&gt;

        &lt;animate attributeName="cy"
                 attributeType="XML"
                 dur="4s"
                 values="10 ; 60 ; 110 ; 60 ; 10 "
                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
                 repeatCount="indefinite"/&gt;

    &lt;/circle&gt;
&lt;/svg&gt;</pre>

<p><strong>Live sample</strong></p>

<p>{{ EmbedLiveSample('Example','120','120') }}</p>

<h2 id="Elements">Elements</h2>

<p>The following elements can use the <code>keyTimes</code> attribute</p>

<ul>
 <li>{{ SVGElement("animate") }}</li>
 <li>{{ SVGElement("animateColor") }}</li>
 <li>{{ SVGElement("animateMotion") }}</li>
 <li>{{ SVGElement("animateTransform") }}</li>
</ul>