---
title: keyTimes
slug: Web/SVG/Attribute/keyTimes
tags:
  - SVG
  - SVG属性
  - keyTimes
translation_of: Web/SVG/Attribute/keyTimes
---
<p>« <a href="/en-US/docs/Web/SVG/Attribute" title="en-US/docs/Web/SVG/Attribute">SVG </a>属性参考主页</p>

<p>keyTimes属性是一个以分号分隔的时间值列表，用于控制动画的执行步骤。列表中的每个值与{{ SVGAttr("values") }}中的值一一对应，定义了{{ SVGAttr("values") }}中的值在动画中何时执行，keyTimes列表中的每一个值都是指定在[0-1]之间的浮点数，表示动画的完成时间。</p>

<p>如果指定了keyTimes列表，那么一定有与之完全对应的{{ SVGAttr("values") }}列表。</p>

<p>每一个连续的时间值必须大于等于前一个时间值。</p>

<p>keyTimes列表的语义取决于插值模式：</p>

<ul>
 <li>对于linear(线性)和spline(样条)动画，列表中的第一个时间值必须为0，列表的最后一个时间值必须为1。与每个value关联的时间值定义了何时设置该value，该value在keyTimes的时间 值的中间插值。</li>
 <li>对于discrete(离线)动画，列表中的第一个值必须为0。与每个value关联的时间值定义了何时设置该value，动画函数使用该value，直到keyTimes中定义的下一个时间值。</li>
</ul>

<p> </p>

<p> </p>

<ul>
</ul>

<p> </p>

<p>如果插值模式是paced（踏步），keyTimes属性被忽略。</p>

<p>如果duration（持续时间）不确定，则将忽略任何keyTimes规范。</p>

<h2 id="用法">用法</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">类别</th>
   <td>动画值属性</td>
  </tr>
  <tr>
   <th scope="row">值</th>
   <td>&lt;list&gt;</td>
  </tr>
  <tr>
   <th scope="row">可变性</th>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">规范文档</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>

<h2 id="元素">元素</h2>

<p>以下元素可以使用 <code>keyTimes属性</code></p>

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