动画样式.md

# 动画样式<a name="ZH-CN_TOPIC_0000001162414609"></a>

组件普遍支持的可以在style或css中设置的动态的旋转、平移、缩放效果。

<a name="zh-cn_topic_0000001058830799_table1863253974"></a>
<table><thead align="left"><tr id="zh-cn_topic_0000001058830799_row786315538710"><th class="cellrowborder" valign="top" width="28.410000000000004%" id="mcps1.1.5.1.1"><p id="zh-cn_topic_0000001058830799_p108631953175"><a name="zh-cn_topic_0000001058830799_p108631953175"></a><a name="zh-cn_topic_0000001058830799_p108631953175"></a>名称</p>
</th>
<th class="cellrowborder" valign="top" width="17.23%" id="mcps1.1.5.1.2"><p id="zh-cn_topic_0000001058830799_p1486365316710"><a name="zh-cn_topic_0000001058830799_p1486365316710"></a><a name="zh-cn_topic_0000001058830799_p1486365316710"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="12.809999999999999%" id="mcps1.1.5.1.3"><p id="zh-cn_topic_0000001058830799_p138637531275"><a name="zh-cn_topic_0000001058830799_p138637531275"></a><a name="zh-cn_topic_0000001058830799_p138637531275"></a>默认值</p>
</th>
<th class="cellrowborder" valign="top" width="41.55%" id="mcps1.1.5.1.4"><p id="zh-cn_topic_0000001058830799_p17863053878"><a name="zh-cn_topic_0000001058830799_p17863053878"></a><a name="zh-cn_topic_0000001058830799_p17863053878"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="zh-cn_topic_0000001058830799_row178631153474"><td class="cellrowborder" valign="top" width="28.410000000000004%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001058830799_p4863105311717"><a name="zh-cn_topic_0000001058830799_p4863105311717"></a><a name="zh-cn_topic_0000001058830799_p4863105311717"></a>transform-origin</p>
</td>
<td class="cellrowborder" valign="top" width="17.23%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001058830799_p19520834194416"><a name="zh-cn_topic_0000001058830799_p19520834194416"></a><a name="zh-cn_topic_0000001058830799_p19520834194416"></a>&lt;percentage&gt; | &lt;length&gt; &lt;percentage&gt; | &lt;length&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="12.809999999999999%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001058830799_p1986319537716"><a name="zh-cn_topic_0000001058830799_p1986319537716"></a><a name="zh-cn_topic_0000001058830799_p1986319537716"></a>控件中心</p>
</td>
<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001058830799_p6867140201912"><a name="zh-cn_topic_0000001058830799_p6867140201912"></a><a name="zh-cn_topic_0000001058830799_p6867140201912"></a>变换对象的原点位置，支持px和百分比(相对于动画目标组件)，如果仅设置一个值，另一个值为50%。</p>
<p id="zh-cn_topic_0000001058830799_p11863165316720"><a name="zh-cn_topic_0000001058830799_p11863165316720"></a><a name="zh-cn_topic_0000001058830799_p11863165316720"></a>示例：</p>
<p id="zh-cn_topic_0000001058830799_p146961332184513"><a name="zh-cn_topic_0000001058830799_p146961332184513"></a><a name="zh-cn_topic_0000001058830799_p146961332184513"></a>transform-origin: 200px 30%</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001058830799_row486314531779"><td class="cellrowborder" valign="top" width="28.410000000000004%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001058830799_p28641953175"><a name="zh-cn_topic_0000001058830799_p28641953175"></a><a name="zh-cn_topic_0000001058830799_p28641953175"></a>transform</p>
</td>
<td class="cellrowborder" valign="top" width="17.23%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001058830799_p1286475313710"><a name="zh-cn_topic_0000001058830799_p1286475313710"></a><a name="zh-cn_topic_0000001058830799_p1286475313710"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="12.809999999999999%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001058830799_p8864155311715"><a name="zh-cn_topic_0000001058830799_p8864155311715"></a><a name="zh-cn_topic_0000001058830799_p8864155311715"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001058830799_p52158111929"><a name="zh-cn_topic_0000001058830799_p52158111929"></a><a name="zh-cn_topic_0000001058830799_p52158111929"></a>支持同时设置平移/旋转/缩放的属性</p>
<p id="zh-cn_topic_0000001058830799_p1286415319715"><a name="zh-cn_topic_0000001058830799_p1286415319715"></a><a name="zh-cn_topic_0000001058830799_p1286415319715"></a>详见<a href="#zh-cn_topic_0000001058830799_table28802443315">表1</a>。</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001058830799_row14864453877"><td class="cellrowborder" valign="top" width="28.410000000000004%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001058830799_p88641753677"><a name="zh-cn_topic_0000001058830799_p88641753677"></a><a name="zh-cn_topic_0000001058830799_p88641753677"></a>animation-name</p>
</td>
<td class="cellrowborder" valign="top" width="17.23%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001058830799_p20864853870"><a name="zh-cn_topic_0000001058830799_p20864853870"></a><a name="zh-cn_topic_0000001058830799_p20864853870"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="12.809999999999999%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001058830799_p158644534715"><a name="zh-cn_topic_0000001058830799_p158644534715"></a><a name="zh-cn_topic_0000001058830799_p158644534715"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001058830799_p58645531719"><a name="zh-cn_topic_0000001058830799_p58645531719"></a><a name="zh-cn_topic_0000001058830799_p58645531719"></a>指定@keyframes，详见<a href="#zh-cn_topic_0000001058830799_t48a722bba37a44c883ed4e046a4cf82e">表2</a>。</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001058830799_row8864125319718"><td class="cellrowborder" valign="top" width="28.410000000000004%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001058830799_p128646539711"><a name="zh-cn_topic_0000001058830799_p128646539711"></a><a name="zh-cn_topic_0000001058830799_p128646539711"></a>animation-delay</p>
</td>
<td class="cellrowborder" valign="top" width="17.23%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001058830799_p1486418539720"><a name="zh-cn_topic_0000001058830799_p1486418539720"></a><a name="zh-cn_topic_0000001058830799_p1486418539720"></a>&lt;time&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="12.809999999999999%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001058830799_p086445317716"><a name="zh-cn_topic_0000001058830799_p086445317716"></a><a name="zh-cn_topic_0000001058830799_p086445317716"></a>0</p>
</td>
<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001058830799_p1864135310710"><a name="zh-cn_topic_0000001058830799_p1864135310710"></a><a name="zh-cn_topic_0000001058830799_p1864135310710"></a>定义动画播放的延迟时间。支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001058830799_row11864135314712"><td class="cellrowborder" valign="top" width="28.410000000000004%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001058830799_p1586435311713"><a name="zh-cn_topic_0000001058830799_p1586435311713"></a><a name="zh-cn_topic_0000001058830799_p1586435311713"></a>animation-duration</p>
</td>
<td class="cellrowborder" valign="top" width="17.23%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001058830799_p16864135316714"><a name="zh-cn_topic_0000001058830799_p16864135316714"></a><a name="zh-cn_topic_0000001058830799_p16864135316714"></a>&lt;time&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="12.809999999999999%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001058830799_p148641753971"><a name="zh-cn_topic_0000001058830799_p148641753971"></a><a name="zh-cn_topic_0000001058830799_p148641753971"></a>0</p>
</td>
<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001058830799_p342192073412"><a name="zh-cn_topic_0000001058830799_p342192073412"></a><a name="zh-cn_topic_0000001058830799_p342192073412"></a>定义一个动画周期。支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。</p>
<div class="note" id="zh-cn_topic_0000001058830799_note11257121119511"><a name="zh-cn_topic_0000001058830799_note11257121119511"></a><a name="zh-cn_topic_0000001058830799_note11257121119511"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001058830799_p126422011184410"><a name="zh-cn_topic_0000001058830799_p126422011184410"></a><a name="zh-cn_topic_0000001058830799_p126422011184410"></a>animation-duration 样式必须设置，否则时长为 0，则不会播放动画。</p>
</div></div>
</td>
</tr>
<tr id="zh-cn_topic_0000001058830799_row12864253377"><td class="cellrowborder" valign="top" width="28.410000000000004%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001058830799_p138641353779"><a name="zh-cn_topic_0000001058830799_p138641353779"></a><a name="zh-cn_topic_0000001058830799_p138641353779"></a>animation-iteration-count</p>
</td>
<td class="cellrowborder" valign="top" width="17.23%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001058830799_p68642532717"><a name="zh-cn_topic_0000001058830799_p68642532717"></a><a name="zh-cn_topic_0000001058830799_p68642532717"></a>number  | infinite</p>
</td>
<td class="cellrowborder" valign="top" width="12.809999999999999%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001058830799_p9864195312710"><a name="zh-cn_topic_0000001058830799_p9864195312710"></a><a name="zh-cn_topic_0000001058830799_p9864195312710"></a>1</p>
</td>
<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001058830799_p138641653475"><a name="zh-cn_topic_0000001058830799_p138641653475"></a><a name="zh-cn_topic_0000001058830799_p138641653475"></a>定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001058830799_row17864453976"><td class="cellrowborder" valign="top" width="28.410000000000004%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001058830799_p158650537712"><a name="zh-cn_topic_0000001058830799_p158650537712"></a><a name="zh-cn_topic_0000001058830799_p158650537712"></a>animation-timing-function</p>
</td>
<td class="cellrowborder" valign="top" width="17.23%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001058830799_p19865185313717"><a name="zh-cn_topic_0000001058830799_p19865185313717"></a><a name="zh-cn_topic_0000001058830799_p19865185313717"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="12.809999999999999%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001058830799_p686514531178"><a name="zh-cn_topic_0000001058830799_p686514531178"></a><a name="zh-cn_topic_0000001058830799_p686514531178"></a>ease</p>
</td>
<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001058830799_p38652531974"><a name="zh-cn_topic_0000001058830799_p38652531974"></a><a name="zh-cn_topic_0000001058830799_p38652531974"></a>描述动画执行的速度曲线，用于使动画更为平滑。</p>
<p id="zh-cn_topic_0000001058830799_p586513531377"><a name="zh-cn_topic_0000001058830799_p586513531377"></a><a name="zh-cn_topic_0000001058830799_p586513531377"></a>可选项有：</p>
<a name="zh-cn_topic_0000001058830799_ul104958313219"></a><a name="zh-cn_topic_0000001058830799_ul104958313219"></a><ul id="zh-cn_topic_0000001058830799_ul104958313219"><li>linear：表示动画从头到尾的速度都是相同的。</li><li>ease：表示动画以低速开始，然后加快，在结束前变慢，cubic-bezier(0.25, 0.1, 0.25, 1.0)。</li><li>ease-in：表示动画以低速开始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。</li><li>ease-out：表示动画以低速结束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。</li><li>ease-in-out：表示动画以低速开始和结束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。</li><li>friction：阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。</li><li>extreme-deceleration：急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。</li><li>sharp：锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。</li><li>rhythm：节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。</li><li>smooth：平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。</li><li>cubic-bezier：在三次贝塞尔函数中定义动画变化过程，入参的x和y值必须处于0-1之间。</li></ul>
</td>
</tr>
<tr id="zh-cn_topic_0000001058830799_row1686675319718"><td class="cellrowborder" valign="top" width="28.410000000000004%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001058830799_p886655314713"><a name="zh-cn_topic_0000001058830799_p886655314713"></a><a name="zh-cn_topic_0000001058830799_p886655314713"></a>animation-fill-mode</p>
</td>
<td class="cellrowborder" valign="top" width="17.23%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001058830799_p386625318718"><a name="zh-cn_topic_0000001058830799_p386625318718"></a><a name="zh-cn_topic_0000001058830799_p386625318718"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="12.809999999999999%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001058830799_p158661153171"><a name="zh-cn_topic_0000001058830799_p158661153171"></a><a name="zh-cn_topic_0000001058830799_p158661153171"></a>none</p>
</td>
<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001058830799_p48661353174"><a name="zh-cn_topic_0000001058830799_p48661353174"></a><a name="zh-cn_topic_0000001058830799_p48661353174"></a>指定动画开始和结束的状态：</p>
<a name="zh-cn_topic_0000001058830799_ul6388194816"></a><a name="zh-cn_topic_0000001058830799_ul6388194816"></a><ul id="zh-cn_topic_0000001058830799_ul6388194816"><li>none：在动画执行之前和之后都不会应用任何样式到目标上。</li><li>forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。</li></ul>
</td>
</tr>
</tbody>
</table>

**表 1**  transform操作说明

<a name="zh-cn_topic_0000001058830799_table28802443315"></a>
<table><thead align="left"><tr id="zh-cn_topic_0000001058830799_row88808448314"><th class="cellrowborder" valign="top" width="18.04%" id="mcps1.2.4.1.1"><p id="zh-cn_topic_0000001058830799_p88808441132"><a name="zh-cn_topic_0000001058830799_p88808441132"></a><a name="zh-cn_topic_0000001058830799_p88808441132"></a>名称</p>
</th>
<th class="cellrowborder" valign="top" width="27.71%" id="mcps1.2.4.1.2"><p id="zh-cn_topic_0000001058830799_p16880244334"><a name="zh-cn_topic_0000001058830799_p16880244334"></a><a name="zh-cn_topic_0000001058830799_p16880244334"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="54.25%" id="mcps1.2.4.1.3"><p id="zh-cn_topic_0000001058830799_p198802443316"><a name="zh-cn_topic_0000001058830799_p198802443316"></a><a name="zh-cn_topic_0000001058830799_p198802443316"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="zh-cn_topic_0000001058830799_row1588011441433"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001058830799_p1188018441039"><a name="zh-cn_topic_0000001058830799_p1188018441039"></a><a name="zh-cn_topic_0000001058830799_p1188018441039"></a>translate</p>
</td>
<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001058830799_p288015447310"><a name="zh-cn_topic_0000001058830799_p288015447310"></a><a name="zh-cn_topic_0000001058830799_p288015447310"></a>&lt;length&gt;<span id="zh-cn_topic_0000001058830799_ph168318101405"><a name="zh-cn_topic_0000001058830799_ph168318101405"></a><a name="zh-cn_topic_0000001058830799_ph168318101405"></a>| &lt;percent&gt;</span></p>
</td>
<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001058830799_p98811441934"><a name="zh-cn_topic_0000001058830799_p98811441934"></a><a name="zh-cn_topic_0000001058830799_p98811441934"></a>平移动画属性，支持设置x轴和y轴两个维度的平移参数</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001058830799_row088154420311"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001058830799_p1688124420315"><a name="zh-cn_topic_0000001058830799_p1688124420315"></a><a name="zh-cn_topic_0000001058830799_p1688124420315"></a>translateX</p>
</td>
<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001058830799_p208813441237"><a name="zh-cn_topic_0000001058830799_p208813441237"></a><a name="zh-cn_topic_0000001058830799_p208813441237"></a>&lt;length&gt;<span id="zh-cn_topic_0000001058830799_ph108741224400"><a name="zh-cn_topic_0000001058830799_ph108741224400"></a><a name="zh-cn_topic_0000001058830799_ph108741224400"></a>| &lt;percent&gt;</span></p>
</td>
<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001058830799_p688112441132"><a name="zh-cn_topic_0000001058830799_p688112441132"></a><a name="zh-cn_topic_0000001058830799_p688112441132"></a>X轴方向平移动画属性</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001058830799_row08816441839"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001058830799_p1588110447311"><a name="zh-cn_topic_0000001058830799_p1588110447311"></a><a name="zh-cn_topic_0000001058830799_p1588110447311"></a>translateY</p>
</td>
<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001058830799_p288118441533"><a name="zh-cn_topic_0000001058830799_p288118441533"></a><a name="zh-cn_topic_0000001058830799_p288118441533"></a>&lt;length&gt;<span id="zh-cn_topic_0000001058830799_ph2207350401"><a name="zh-cn_topic_0000001058830799_ph2207350401"></a><a name="zh-cn_topic_0000001058830799_ph2207350401"></a>| &lt;percent&gt;</span></p>
</td>
<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001058830799_p38818447314"><a name="zh-cn_topic_0000001058830799_p38818447314"></a><a name="zh-cn_topic_0000001058830799_p38818447314"></a>Y轴方向平移动画属性</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001058830799_row288111441037"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001058830799_p988164419317"><a name="zh-cn_topic_0000001058830799_p988164419317"></a><a name="zh-cn_topic_0000001058830799_p988164419317"></a>scale</p>
</td>
<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001058830799_p0881744132"><a name="zh-cn_topic_0000001058830799_p0881744132"></a><a name="zh-cn_topic_0000001058830799_p0881744132"></a>&lt;number&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001058830799_p5881114412312"><a name="zh-cn_topic_0000001058830799_p5881114412312"></a><a name="zh-cn_topic_0000001058830799_p5881114412312"></a>缩放动画属性，支持设置x轴和y轴两个维度的缩放参数</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001058830799_row088117445315"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001058830799_p7881164417311"><a name="zh-cn_topic_0000001058830799_p7881164417311"></a><a name="zh-cn_topic_0000001058830799_p7881164417311"></a>scaleX</p>
</td>
<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001058830799_p128816446311"><a name="zh-cn_topic_0000001058830799_p128816446311"></a><a name="zh-cn_topic_0000001058830799_p128816446311"></a>&lt;number&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001058830799_p388112446310"><a name="zh-cn_topic_0000001058830799_p388112446310"></a><a name="zh-cn_topic_0000001058830799_p388112446310"></a>X轴方向缩放动画属性</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001058830799_row78813444315"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001058830799_p1988144419319"><a name="zh-cn_topic_0000001058830799_p1988144419319"></a><a name="zh-cn_topic_0000001058830799_p1988144419319"></a>scaleY</p>
</td>
<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001058830799_p2881124416314"><a name="zh-cn_topic_0000001058830799_p2881124416314"></a><a name="zh-cn_topic_0000001058830799_p2881124416314"></a>&lt;number&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001058830799_p128815441936"><a name="zh-cn_topic_0000001058830799_p128815441936"></a><a name="zh-cn_topic_0000001058830799_p128815441936"></a>Y轴方向缩放动画属性</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001058830799_row1488114441539"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001058830799_p1888104411314"><a name="zh-cn_topic_0000001058830799_p1888104411314"></a><a name="zh-cn_topic_0000001058830799_p1888104411314"></a>rotate</p>
</td>
<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001058830799_p168825447318"><a name="zh-cn_topic_0000001058830799_p168825447318"></a><a name="zh-cn_topic_0000001058830799_p168825447318"></a>&lt;deg&gt; | &lt;rad&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001058830799_p8882194415317"><a name="zh-cn_topic_0000001058830799_p8882194415317"></a><a name="zh-cn_topic_0000001058830799_p8882194415317"></a>旋转动画属性<span id="zh-cn_topic_0000001058830799_ph146515256413"><a name="zh-cn_topic_0000001058830799_ph146515256413"></a><a name="zh-cn_topic_0000001058830799_ph146515256413"></a>，支持设置x轴和y轴两个维度的选中参数</span></p>
</td>
</tr>
<tr id="zh-cn_topic_0000001058830799_row188821744736"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001058830799_p7882744632"><a name="zh-cn_topic_0000001058830799_p7882744632"></a><a name="zh-cn_topic_0000001058830799_p7882744632"></a>rotateX</p>
</td>
<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001058830799_p78821744632"><a name="zh-cn_topic_0000001058830799_p78821744632"></a><a name="zh-cn_topic_0000001058830799_p78821744632"></a>&lt;deg&gt; | &lt;rad&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001058830799_p588217441134"><a name="zh-cn_topic_0000001058830799_p588217441134"></a><a name="zh-cn_topic_0000001058830799_p588217441134"></a>X轴方向旋转动画属性</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001058830799_row1488294410320"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001058830799_p108826442034"><a name="zh-cn_topic_0000001058830799_p108826442034"></a><a name="zh-cn_topic_0000001058830799_p108826442034"></a>rotateY</p>
</td>
<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001058830799_p388213445311"><a name="zh-cn_topic_0000001058830799_p388213445311"></a><a name="zh-cn_topic_0000001058830799_p388213445311"></a>&lt;deg&gt; | &lt;rad&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001058830799_p8882544638"><a name="zh-cn_topic_0000001058830799_p8882544638"></a><a name="zh-cn_topic_0000001058830799_p8882544638"></a>Y轴方向旋转动画属性</p>
</td>
</tr>
</tbody>
</table>

**表 2**  @keyframes属性说明

<a name="zh-cn_topic_0000001058830799_t48a722bba37a44c883ed4e046a4cf82e"></a>
<table><thead align="left"><tr id="zh-cn_topic_0000001058830799_r856a9393ccf4423ba47ec1b9ed96bb8e"><th class="cellrowborder" valign="top" width="24.242424242424242%" id="mcps1.2.5.1.1"><p id="zh-cn_topic_0000001058830799_ae7a02418e61f4e1db82e64f0e2f1c09e"><a name="zh-cn_topic_0000001058830799_ae7a02418e61f4e1db82e64f0e2f1c09e"></a><a name="zh-cn_topic_0000001058830799_ae7a02418e61f4e1db82e64f0e2f1c09e"></a>名称</p>
</th>
<th class="cellrowborder" valign="top" width="17.581758175817583%" id="mcps1.2.5.1.2"><p id="zh-cn_topic_0000001058830799_a4cee3e18cb724963be38ac53355b7b4d"><a name="zh-cn_topic_0000001058830799_a4cee3e18cb724963be38ac53355b7b4d"></a><a name="zh-cn_topic_0000001058830799_a4cee3e18cb724963be38ac53355b7b4d"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="11.71117111711171%" id="mcps1.2.5.1.3"><p id="zh-cn_topic_0000001058830799_a3e0026aad554469d964bbc102a8eaadb"><a name="zh-cn_topic_0000001058830799_a3e0026aad554469d964bbc102a8eaadb"></a><a name="zh-cn_topic_0000001058830799_a3e0026aad554469d964bbc102a8eaadb"></a>默认值</p>
</th>
<th class="cellrowborder" valign="top" width="46.464646464646464%" id="mcps1.2.5.1.4"><p id="zh-cn_topic_0000001058830799_a2b58cc16430e4420b7e9ab323cab292d"><a name="zh-cn_topic_0000001058830799_a2b58cc16430e4420b7e9ab323cab292d"></a><a name="zh-cn_topic_0000001058830799_a2b58cc16430e4420b7e9ab323cab292d"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="zh-cn_topic_0000001058830799_r452ea683f0af4624a69c836abfcdc440"><td class="cellrowborder" valign="top" width="24.242424242424242%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001058830799_a5eb36c26384742ba9e99adc2493de600"><a name="zh-cn_topic_0000001058830799_a5eb36c26384742ba9e99adc2493de600"></a><a name="zh-cn_topic_0000001058830799_a5eb36c26384742ba9e99adc2493de600"></a>background-color</p>
</td>
<td class="cellrowborder" valign="top" width="17.581758175817583%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001058830799_abc67b94bfbcb4d64a00cfe2e1e372b6d"><a name="zh-cn_topic_0000001058830799_abc67b94bfbcb4d64a00cfe2e1e372b6d"></a><a name="zh-cn_topic_0000001058830799_abc67b94bfbcb4d64a00cfe2e1e372b6d"></a>&lt;color&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="11.71117111711171%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001058830799_ab027f70b389742bbb69fa1665a1aaaf6"><a name="zh-cn_topic_0000001058830799_ab027f70b389742bbb69fa1665a1aaaf6"></a><a name="zh-cn_topic_0000001058830799_ab027f70b389742bbb69fa1665a1aaaf6"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="46.464646464646464%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001058830799_a2a9535e7a520474eaa5ca78ca61ca148"><a name="zh-cn_topic_0000001058830799_a2a9535e7a520474eaa5ca78ca61ca148"></a><a name="zh-cn_topic_0000001058830799_a2a9535e7a520474eaa5ca78ca61ca148"></a>动画执行后应用到组件上的背景颜色。</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001058830799_rb2e92403cacf4ce283fd5e3c625635c5"><td class="cellrowborder" valign="top" width="24.242424242424242%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001058830799_afd219ea8c1384a3c84d4e7ca09be073c"><a name="zh-cn_topic_0000001058830799_afd219ea8c1384a3c84d4e7ca09be073c"></a><a name="zh-cn_topic_0000001058830799_afd219ea8c1384a3c84d4e7ca09be073c"></a>opacity</p>
</td>
<td class="cellrowborder" valign="top" width="17.581758175817583%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001058830799_a89cf6dcf06954b37a77fb21ff2140188"><a name="zh-cn_topic_0000001058830799_a89cf6dcf06954b37a77fb21ff2140188"></a><a name="zh-cn_topic_0000001058830799_a89cf6dcf06954b37a77fb21ff2140188"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="11.71117111711171%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001058830799_a2718c52ec5574f49a263ccd45d448656"><a name="zh-cn_topic_0000001058830799_a2718c52ec5574f49a263ccd45d448656"></a><a name="zh-cn_topic_0000001058830799_a2718c52ec5574f49a263ccd45d448656"></a>1</p>
</td>
<td class="cellrowborder" valign="top" width="46.464646464646464%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001058830799_a6bcdedbaaa87470cae3e3beea1b67aad"><a name="zh-cn_topic_0000001058830799_a6bcdedbaaa87470cae3e3beea1b67aad"></a><a name="zh-cn_topic_0000001058830799_a6bcdedbaaa87470cae3e3beea1b67aad"></a>动画执行后应用到组件上的不透明度值，为介于0到1间的数值，默认为1。</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001058830799_row13625142317305"><td class="cellrowborder" valign="top" width="24.242424242424242%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001058830799_p116261023163017"><a name="zh-cn_topic_0000001058830799_p116261023163017"></a><a name="zh-cn_topic_0000001058830799_p116261023163017"></a>width</p>
</td>
<td class="cellrowborder" valign="top" width="17.581758175817583%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001058830799_p5647133543013"><a name="zh-cn_topic_0000001058830799_p5647133543013"></a><a name="zh-cn_topic_0000001058830799_p5647133543013"></a>&lt;length&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="11.71117111711171%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001058830799_p13626202319305"><a name="zh-cn_topic_0000001058830799_p13626202319305"></a><a name="zh-cn_topic_0000001058830799_p13626202319305"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="46.464646464646464%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001058830799_p562617236301"><a name="zh-cn_topic_0000001058830799_p562617236301"></a><a name="zh-cn_topic_0000001058830799_p562617236301"></a>动画执行后应用到组件上的宽度值。</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001058830799_rf77cedb94a3c4c9a8556a2a2a3876997"><td class="cellrowborder" valign="top" width="24.242424242424242%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001058830799_a2f05af1c56e34ed4aa900b467dcf3bb7"><a name="zh-cn_topic_0000001058830799_a2f05af1c56e34ed4aa900b467dcf3bb7"></a><a name="zh-cn_topic_0000001058830799_a2f05af1c56e34ed4aa900b467dcf3bb7"></a>height</p>
</td>
<td class="cellrowborder" valign="top" width="17.581758175817583%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001058830799_af3cdb37ab1cc46ac823bee3784909613"><a name="zh-cn_topic_0000001058830799_af3cdb37ab1cc46ac823bee3784909613"></a><a name="zh-cn_topic_0000001058830799_af3cdb37ab1cc46ac823bee3784909613"></a>&lt;length&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="11.71117111711171%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001058830799_a35aa8df3690b4b169f67360826114e7f"><a name="zh-cn_topic_0000001058830799_a35aa8df3690b4b169f67360826114e7f"></a><a name="zh-cn_topic_0000001058830799_a35aa8df3690b4b169f67360826114e7f"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="46.464646464646464%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001058830799_a0ecbff2f02ac42ffb797b9bcae919003"><a name="zh-cn_topic_0000001058830799_a0ecbff2f02ac42ffb797b9bcae919003"></a><a name="zh-cn_topic_0000001058830799_a0ecbff2f02ac42ffb797b9bcae919003"></a>动画执行后应用到组件上的高度值。</p>
</td>
</tr>
<tr id="zh-cn_topic_0000001058830799_r43ece702a1c945f08cd7eb195b5faac3"><td class="cellrowborder" valign="top" width="24.242424242424242%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001058830799_aa51ca83ead4c4c00b078f3d2c1e7e66b"><a name="zh-cn_topic_0000001058830799_aa51ca83ead4c4c00b078f3d2c1e7e66b"></a><a name="zh-cn_topic_0000001058830799_aa51ca83ead4c4c00b078f3d2c1e7e66b"></a>transform</p>
</td>
<td class="cellrowborder" valign="top" width="17.581758175817583%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001058830799_a44aec140ddba46b19c96be3ef58468c6"><a name="zh-cn_topic_0000001058830799_a44aec140ddba46b19c96be3ef58468c6"></a><a name="zh-cn_topic_0000001058830799_a44aec140ddba46b19c96be3ef58468c6"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="11.71117111711171%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001058830799_af2ea25b4333d490d9723dec6c6d1709f"><a name="zh-cn_topic_0000001058830799_af2ea25b4333d490d9723dec6c6d1709f"></a><a name="zh-cn_topic_0000001058830799_af2ea25b4333d490d9723dec6c6d1709f"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="46.464646464646464%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001058830799_adff3debf36764e5c868ca9823663cd5b"><a name="zh-cn_topic_0000001058830799_adff3debf36764e5c868ca9823663cd5b"></a><a name="zh-cn_topic_0000001058830799_adff3debf36764e5c868ca9823663cd5b"></a>定义应用在组件上的变换类型，见<a href="#zh-cn_topic_0000001058830799_table28802443315">表1</a>。</p>
</td>
</tr>
</tbody>
</table>

对于不支持起始值或终止值缺省的情况，可以通过from和to显示指定起始和结束。示例：

```
@keyframes Go
{
  from {
    background-color: #f76160;
    transform:translate(100px) rotate(0deg) scale(1.0);
  }

  to {
    background-color: #09ba07;
    transform:translate(100px) rotate(180deg) scale(2.0);
  }
}
```

![](figures/动画样式demo2.gif)

>![](public_sys-resources/icon-note.gif) **说明：** 
>@keyframes的from/to不支持动态绑定。