1# 动画样式<a name="ZH-CN_TOPIC_0000001164130754"></a> 2 3组件支持动态的旋转、平移、缩放效果，可在style或css中设置。 4 5<a name="zh-cn_topic_0000001173164765_table1863253974"></a> 6<table><thead align="left"><tr id="zh-cn_topic_0000001173164765_row786315538710"><th class="cellrowborder" valign="top" width="26.02%" id="mcps1.1.5.1.1"><p id="zh-cn_topic_0000001173164765_p108631953175"><a name="zh-cn_topic_0000001173164765_p108631953175"></a><a name="zh-cn_topic_0000001173164765_p108631953175"></a>名称</p> 7</th> 8<th class="cellrowborder" valign="top" width="18.529999999999998%" id="mcps1.1.5.1.2"><p id="zh-cn_topic_0000001173164765_p1486365316710"><a name="zh-cn_topic_0000001173164765_p1486365316710"></a><a name="zh-cn_topic_0000001173164765_p1486365316710"></a>类型</p> 9</th> 10<th class="cellrowborder" valign="top" width="13.900000000000002%" id="mcps1.1.5.1.3"><p id="zh-cn_topic_0000001173164765_p138637531275"><a name="zh-cn_topic_0000001173164765_p138637531275"></a><a name="zh-cn_topic_0000001173164765_p138637531275"></a>默认值</p> 11</th> 12<th class="cellrowborder" valign="top" width="41.55%" id="mcps1.1.5.1.4"><p id="zh-cn_topic_0000001173164765_p17863053878"><a name="zh-cn_topic_0000001173164765_p17863053878"></a><a name="zh-cn_topic_0000001173164765_p17863053878"></a>描述</p> 13</th> 14</tr> 15</thead> 16<tbody><tr id="zh-cn_topic_0000001173164765_row178631153474"><td class="cellrowborder" valign="top" width="26.02%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173164765_p4863105311717"><a name="zh-cn_topic_0000001173164765_p4863105311717"></a><a name="zh-cn_topic_0000001173164765_p4863105311717"></a>transform-origin</p> 17</td> 18<td class="cellrowborder" valign="top" width="18.529999999999998%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173164765_p19520834194416"><a name="zh-cn_topic_0000001173164765_p19520834194416"></a><a name="zh-cn_topic_0000001173164765_p19520834194416"></a>string<sup id="zh-cn_topic_0000001173164765_sup18345114116209"><a name="zh-cn_topic_0000001173164765_sup18345114116209"></a><a name="zh-cn_topic_0000001173164765_sup18345114116209"></a>6+</sup> | <percentage> | <length> string<sup id="zh-cn_topic_0000001173164765_sup126042215219"><a name="zh-cn_topic_0000001173164765_sup126042215219"></a><a name="zh-cn_topic_0000001173164765_sup126042215219"></a>6+</sup> | <percentage> | <length></p> 19</td> 20<td class="cellrowborder" valign="top" width="13.900000000000002%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173164765_p1986319537716"><a name="zh-cn_topic_0000001173164765_p1986319537716"></a><a name="zh-cn_topic_0000001173164765_p1986319537716"></a>center center</p> 21</td> 22<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173164765_p6867140201912"><a name="zh-cn_topic_0000001173164765_p6867140201912"></a><a name="zh-cn_topic_0000001173164765_p6867140201912"></a>变换对象的原点位置，支持px和百分比(相对于动画目标组件)，如果仅设置一个值，另一个值为50%，第一个string的可选值为：left | center | right ，第二个string的可选值为：top | center | bottom。</p> 23<p id="zh-cn_topic_0000001173164765_p11863165316720"><a name="zh-cn_topic_0000001173164765_p11863165316720"></a><a name="zh-cn_topic_0000001173164765_p11863165316720"></a>示例：</p> 24<p id="zh-cn_topic_0000001173164765_p146961332184513"><a name="zh-cn_topic_0000001173164765_p146961332184513"></a><a name="zh-cn_topic_0000001173164765_p146961332184513"></a>transform-origin: 200px 30%。</p> 25<p id="zh-cn_topic_0000001173164765_p12696232144513"><a name="zh-cn_topic_0000001173164765_p12696232144513"></a><a name="zh-cn_topic_0000001173164765_p12696232144513"></a>transform-origin: 100px top。</p> 26<p id="zh-cn_topic_0000001173164765_p14231729142211"><a name="zh-cn_topic_0000001173164765_p14231729142211"></a><a name="zh-cn_topic_0000001173164765_p14231729142211"></a>transform-origin: center center。</p> 27</td> 28</tr> 29<tr id="zh-cn_topic_0000001173164765_row486314531779"><td class="cellrowborder" valign="top" width="26.02%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173164765_p28641953175"><a name="zh-cn_topic_0000001173164765_p28641953175"></a><a name="zh-cn_topic_0000001173164765_p28641953175"></a>transform</p> 30</td> 31<td class="cellrowborder" valign="top" width="18.529999999999998%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173164765_p1286475313710"><a name="zh-cn_topic_0000001173164765_p1286475313710"></a><a name="zh-cn_topic_0000001173164765_p1286475313710"></a>string</p> 32</td> 33<td class="cellrowborder" valign="top" width="13.900000000000002%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173164765_p8864155311715"><a name="zh-cn_topic_0000001173164765_p8864155311715"></a><a name="zh-cn_topic_0000001173164765_p8864155311715"></a>-</p> 34</td> 35<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173164765_p52158111929"><a name="zh-cn_topic_0000001173164765_p52158111929"></a><a name="zh-cn_topic_0000001173164765_p52158111929"></a>支持同时设置平移/旋转/缩放的属性。</p> 36<p id="zh-cn_topic_0000001173164765_p1286415319715"><a name="zh-cn_topic_0000001173164765_p1286415319715"></a><a name="zh-cn_topic_0000001173164765_p1286415319715"></a>详见<a href="#zh-cn_topic_0000001173164765_table28802443315">表1</a>。</p> 37</td> 38</tr> 39<tr id="zh-cn_topic_0000001173164765_row185145292179"><td class="cellrowborder" valign="top" width="26.02%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173164765_p2515142916172"><a name="zh-cn_topic_0000001173164765_p2515142916172"></a><a name="zh-cn_topic_0000001173164765_p2515142916172"></a>animation<sup id="zh-cn_topic_0000001173164765_sup17981125732213"><a name="zh-cn_topic_0000001173164765_sup17981125732213"></a><a name="zh-cn_topic_0000001173164765_sup17981125732213"></a>6+</sup></p> 40</td> 41<td class="cellrowborder" valign="top" width="18.529999999999998%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173164765_p105152029111712"><a name="zh-cn_topic_0000001173164765_p105152029111712"></a><a name="zh-cn_topic_0000001173164765_p105152029111712"></a>string</p> 42</td> 43<td class="cellrowborder" valign="top" width="13.900000000000002%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173164765_p125157290172"><a name="zh-cn_topic_0000001173164765_p125157290172"></a><a name="zh-cn_topic_0000001173164765_p125157290172"></a>0s ease 0s 1 normal none running none</p> 44</td> 45<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173164765_p1515152915179"><a name="zh-cn_topic_0000001173164765_p1515152915179"></a><a name="zh-cn_topic_0000001173164765_p1515152915179"></a>格式：duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name，每个字段不区分先后，但是 duration / delay 按照出现的先后顺序解析。</p> 46</td> 47</tr> 48<tr id="zh-cn_topic_0000001173164765_row14864453877"><td class="cellrowborder" valign="top" width="26.02%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173164765_p88641753677"><a name="zh-cn_topic_0000001173164765_p88641753677"></a><a name="zh-cn_topic_0000001173164765_p88641753677"></a>animation-name</p> 49</td> 50<td class="cellrowborder" valign="top" width="18.529999999999998%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173164765_p20864853870"><a name="zh-cn_topic_0000001173164765_p20864853870"></a><a name="zh-cn_topic_0000001173164765_p20864853870"></a>string</p> 51</td> 52<td class="cellrowborder" valign="top" width="13.900000000000002%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173164765_p158644534715"><a name="zh-cn_topic_0000001173164765_p158644534715"></a><a name="zh-cn_topic_0000001173164765_p158644534715"></a>-</p> 53</td> 54<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173164765_p58645531719"><a name="zh-cn_topic_0000001173164765_p58645531719"></a><a name="zh-cn_topic_0000001173164765_p58645531719"></a>指定@keyframes，详见<a href="#zh-cn_topic_0000001173164765_t48a722bba37a44c883ed4e046a4cf82e">表2</a>。</p> 55</td> 56</tr> 57<tr id="zh-cn_topic_0000001173164765_row8864125319718"><td class="cellrowborder" valign="top" width="26.02%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173164765_p128646539711"><a name="zh-cn_topic_0000001173164765_p128646539711"></a><a name="zh-cn_topic_0000001173164765_p128646539711"></a>animation-delay</p> 58</td> 59<td class="cellrowborder" valign="top" width="18.529999999999998%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173164765_p1486418539720"><a name="zh-cn_topic_0000001173164765_p1486418539720"></a><a name="zh-cn_topic_0000001173164765_p1486418539720"></a><time></p> 60</td> 61<td class="cellrowborder" valign="top" width="13.900000000000002%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173164765_p086445317716"><a name="zh-cn_topic_0000001173164765_p086445317716"></a><a name="zh-cn_topic_0000001173164765_p086445317716"></a>0</p> 62</td> 63<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173164765_p1864135310710"><a name="zh-cn_topic_0000001173164765_p1864135310710"></a><a name="zh-cn_topic_0000001173164765_p1864135310710"></a>定义动画播放的延迟时间。支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。</p> 64</td> 65</tr> 66<tr id="zh-cn_topic_0000001173164765_row11864135314712"><td class="cellrowborder" valign="top" width="26.02%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173164765_p1586435311713"><a name="zh-cn_topic_0000001173164765_p1586435311713"></a><a name="zh-cn_topic_0000001173164765_p1586435311713"></a>animation-duration</p> 67</td> 68<td class="cellrowborder" valign="top" width="18.529999999999998%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173164765_p16864135316714"><a name="zh-cn_topic_0000001173164765_p16864135316714"></a><a name="zh-cn_topic_0000001173164765_p16864135316714"></a><time></p> 69</td> 70<td class="cellrowborder" valign="top" width="13.900000000000002%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173164765_p148641753971"><a name="zh-cn_topic_0000001173164765_p148641753971"></a><a name="zh-cn_topic_0000001173164765_p148641753971"></a>0</p> 71</td> 72<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173164765_p342192073412"><a name="zh-cn_topic_0000001173164765_p342192073412"></a><a name="zh-cn_topic_0000001173164765_p342192073412"></a>定义一个动画周期。支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。</p> 73<div class="note" id="zh-cn_topic_0000001173164765_note11257121119511"><a name="zh-cn_topic_0000001173164765_note11257121119511"></a><a name="zh-cn_topic_0000001173164765_note11257121119511"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001173164765_p126422011184410"><a name="zh-cn_topic_0000001173164765_p126422011184410"></a><a name="zh-cn_topic_0000001173164765_p126422011184410"></a>animation-duration 样式必须设置，否则时长为 0，则不会播放动画。</p> 74</div></div> 75</td> 76</tr> 77<tr id="zh-cn_topic_0000001173164765_row12864253377"><td class="cellrowborder" valign="top" width="26.02%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173164765_p138641353779"><a name="zh-cn_topic_0000001173164765_p138641353779"></a><a name="zh-cn_topic_0000001173164765_p138641353779"></a>animation-iteration-count</p> 78</td> 79<td class="cellrowborder" valign="top" width="18.529999999999998%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173164765_p68642532717"><a name="zh-cn_topic_0000001173164765_p68642532717"></a><a name="zh-cn_topic_0000001173164765_p68642532717"></a>number | infinite</p> 80</td> 81<td class="cellrowborder" valign="top" width="13.900000000000002%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173164765_p9864195312710"><a name="zh-cn_topic_0000001173164765_p9864195312710"></a><a name="zh-cn_topic_0000001173164765_p9864195312710"></a>1</p> 82</td> 83<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173164765_p138641653475"><a name="zh-cn_topic_0000001173164765_p138641653475"></a><a name="zh-cn_topic_0000001173164765_p138641653475"></a>定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。</p> 84</td> 85</tr> 86<tr id="zh-cn_topic_0000001173164765_row17864453976"><td class="cellrowborder" valign="top" width="26.02%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173164765_p158650537712"><a name="zh-cn_topic_0000001173164765_p158650537712"></a><a name="zh-cn_topic_0000001173164765_p158650537712"></a>animation-timing-function</p> 87</td> 88<td class="cellrowborder" valign="top" width="18.529999999999998%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173164765_p19865185313717"><a name="zh-cn_topic_0000001173164765_p19865185313717"></a><a name="zh-cn_topic_0000001173164765_p19865185313717"></a>string</p> 89</td> 90<td class="cellrowborder" valign="top" width="13.900000000000002%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173164765_p686514531178"><a name="zh-cn_topic_0000001173164765_p686514531178"></a><a name="zh-cn_topic_0000001173164765_p686514531178"></a>ease</p> 91</td> 92<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173164765_p38652531974"><a name="zh-cn_topic_0000001173164765_p38652531974"></a><a name="zh-cn_topic_0000001173164765_p38652531974"></a>描述动画执行的速度曲线，用于使动画更为平滑。</p> 93<p id="zh-cn_topic_0000001173164765_p586513531377"><a name="zh-cn_topic_0000001173164765_p586513531377"></a><a name="zh-cn_topic_0000001173164765_p586513531377"></a>可选项有：</p> 94<a name="zh-cn_topic_0000001173164765_ul104958313219"></a><a name="zh-cn_topic_0000001173164765_ul104958313219"></a><ul id="zh-cn_topic_0000001173164765_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><li>steps: 阶梯曲线<sup id="zh-cn_topic_0000001173164765_sup757555611248"><a name="zh-cn_topic_0000001173164765_sup757555611248"></a><a name="zh-cn_topic_0000001173164765_sup757555611248"></a><span>6+</span></sup>。语法：steps(number[, end|start])；number必须设置，支持的类型为正整数。第二个参数可选，表示在每个间隔的起点或是终点发生阶跃变化，支持设置end或start，默认值为end。</li></ul> 95</td> 96</tr> 97<tr id="zh-cn_topic_0000001173164765_row14611141219587"><td class="cellrowborder" valign="top" width="26.02%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173164765_p2611151295818"><a name="zh-cn_topic_0000001173164765_p2611151295818"></a><a name="zh-cn_topic_0000001173164765_p2611151295818"></a>animation-direction<sup id="zh-cn_topic_0000001173164765_sup3648049121713"><a name="zh-cn_topic_0000001173164765_sup3648049121713"></a><a name="zh-cn_topic_0000001173164765_sup3648049121713"></a>6+</sup></p> 98</td> 99<td class="cellrowborder" valign="top" width="18.529999999999998%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173164765_p8611111210580"><a name="zh-cn_topic_0000001173164765_p8611111210580"></a><a name="zh-cn_topic_0000001173164765_p8611111210580"></a>string</p> 100</td> 101<td class="cellrowborder" valign="top" width="13.900000000000002%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173164765_p2611412105816"><a name="zh-cn_topic_0000001173164765_p2611412105816"></a><a name="zh-cn_topic_0000001173164765_p2611412105816"></a>normal</p> 102</td> 103<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173164765_p5611151219588"><a name="zh-cn_topic_0000001173164765_p5611151219588"></a><a name="zh-cn_topic_0000001173164765_p5611151219588"></a>指定动画的播放模式：</p> 104<a name="zh-cn_topic_0000001173164765_ul7721141717012"></a><a name="zh-cn_topic_0000001173164765_ul7721141717012"></a><ul id="zh-cn_topic_0000001173164765_ul7721141717012"><li>normal： 动画正向循环播放。</li><li>reverse： 动画反向循环播放。</li><li>alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放。</li><li>alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。</li></ul> 105</td> 106</tr> 107<tr id="zh-cn_topic_0000001173164765_row1686675319718"><td class="cellrowborder" valign="top" width="26.02%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173164765_p886655314713"><a name="zh-cn_topic_0000001173164765_p886655314713"></a><a name="zh-cn_topic_0000001173164765_p886655314713"></a>animation-fill-mode</p> 108</td> 109<td class="cellrowborder" valign="top" width="18.529999999999998%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173164765_p386625318718"><a name="zh-cn_topic_0000001173164765_p386625318718"></a><a name="zh-cn_topic_0000001173164765_p386625318718"></a>string</p> 110</td> 111<td class="cellrowborder" valign="top" width="13.900000000000002%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173164765_p158661153171"><a name="zh-cn_topic_0000001173164765_p158661153171"></a><a name="zh-cn_topic_0000001173164765_p158661153171"></a>none</p> 112</td> 113<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173164765_p48661353174"><a name="zh-cn_topic_0000001173164765_p48661353174"></a><a name="zh-cn_topic_0000001173164765_p48661353174"></a>指定动画开始和结束的状态：</p> 114<a name="zh-cn_topic_0000001173164765_ul6388194816"></a><a name="zh-cn_topic_0000001173164765_ul6388194816"></a><ul id="zh-cn_topic_0000001173164765_ul6388194816"><li>none：在动画执行之前和之后都不会应用任何样式到目标上。</li><li>forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。</li><li>backwards<sup id="zh-cn_topic_0000001173164765_sup8968322122016"><a name="zh-cn_topic_0000001173164765_sup8968322122016"></a><a name="zh-cn_topic_0000001173164765_sup8968322122016"></a><span>6+</span></sup>：动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值，当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。</li><li>both<sup id="zh-cn_topic_0000001173164765_sup7223121852016"><a name="zh-cn_topic_0000001173164765_sup7223121852016"></a><a name="zh-cn_topic_0000001173164765_sup7223121852016"></a><span>6+</span></sup>：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。</li></ul> 115</td> 116</tr> 117<tr id="zh-cn_topic_0000001173164765_row5395759219"><td class="cellrowborder" valign="top" width="26.02%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173164765_p93951251929"><a name="zh-cn_topic_0000001173164765_p93951251929"></a><a name="zh-cn_topic_0000001173164765_p93951251929"></a>animation-play-state<sup id="zh-cn_topic_0000001173164765_sup492164917239"><a name="zh-cn_topic_0000001173164765_sup492164917239"></a><a name="zh-cn_topic_0000001173164765_sup492164917239"></a>6+</sup></p> 118</td> 119<td class="cellrowborder" valign="top" width="18.529999999999998%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173164765_p3395351723"><a name="zh-cn_topic_0000001173164765_p3395351723"></a><a name="zh-cn_topic_0000001173164765_p3395351723"></a>string</p> 120</td> 121<td class="cellrowborder" valign="top" width="13.900000000000002%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173164765_p1939545727"><a name="zh-cn_topic_0000001173164765_p1939545727"></a><a name="zh-cn_topic_0000001173164765_p1939545727"></a>running</p> 122</td> 123<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173164765_p173951158217"><a name="zh-cn_topic_0000001173164765_p173951158217"></a><a name="zh-cn_topic_0000001173164765_p173951158217"></a>指定动画的当前状态：</p> 124<a name="zh-cn_topic_0000001173164765_ul1857213301839"></a><a name="zh-cn_topic_0000001173164765_ul1857213301839"></a><ul id="zh-cn_topic_0000001173164765_ul1857213301839"><li>paused：动画状态为暂停。</li><li>running：动画状态为播放。</li></ul> 125</td> 126</tr> 127<tr id="zh-cn_topic_0000001173164765_row37171701451"><td class="cellrowborder" valign="top" width="26.02%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173164765_p177174010450"><a name="zh-cn_topic_0000001173164765_p177174010450"></a><a name="zh-cn_topic_0000001173164765_p177174010450"></a>transition<sup id="zh-cn_topic_0000001173164765_sup5232112211383"><a name="zh-cn_topic_0000001173164765_sup5232112211383"></a><a name="zh-cn_topic_0000001173164765_sup5232112211383"></a>6+</sup></p> 128</td> 129<td class="cellrowborder" valign="top" width="18.529999999999998%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173164765_p197175014510"><a name="zh-cn_topic_0000001173164765_p197175014510"></a><a name="zh-cn_topic_0000001173164765_p197175014510"></a>string</p> 130</td> 131<td class="cellrowborder" valign="top" width="13.900000000000002%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173164765_p187171018459"><a name="zh-cn_topic_0000001173164765_p187171018459"></a><a name="zh-cn_topic_0000001173164765_p187171018459"></a>all 0 ease 0</p> 132</td> 133<td class="cellrowborder" valign="top" width="41.55%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173164765_p11717160134515"><a name="zh-cn_topic_0000001173164765_p11717160134515"></a><a name="zh-cn_topic_0000001173164765_p11717160134515"></a>指定组件状态切换时的过渡效果，可以通过transition属性设置如下四个属性：</p> 134<a name="zh-cn_topic_0000001173164765_ul17509159164618"></a><a name="zh-cn_topic_0000001173164765_ul17509159164618"></a><ul id="zh-cn_topic_0000001173164765_ul17509159164618"><li>transition-property：规定设置过渡效果的 CSS 属性的名称，目前支持宽、高、背景色。</li><li>transition-duration：规定完成过渡效果需要的时间，单位秒。</li><li>transition-timing-function：规定过渡效果的时间曲线，支持样式动画提供的曲线。</li><li>transition-delay：规定过渡效果延时启动时间，单位秒。</li></ul> 135</td> 136</tr> 137</tbody> 138</table> 139 140**表 1** transform操作说明 141 142<a name="zh-cn_topic_0000001173164765_table28802443315"></a> 143<table><thead align="left"><tr id="zh-cn_topic_0000001173164765_row88808448314"><th class="cellrowborder" valign="top" width="18.04%" id="mcps1.2.4.1.1"><p id="zh-cn_topic_0000001173164765_p88808441132"><a name="zh-cn_topic_0000001173164765_p88808441132"></a><a name="zh-cn_topic_0000001173164765_p88808441132"></a>名称</p> 144</th> 145<th class="cellrowborder" valign="top" width="27.71%" id="mcps1.2.4.1.2"><p id="zh-cn_topic_0000001173164765_p16880244334"><a name="zh-cn_topic_0000001173164765_p16880244334"></a><a name="zh-cn_topic_0000001173164765_p16880244334"></a>类型</p> 146</th> 147<th class="cellrowborder" valign="top" width="54.25%" id="mcps1.2.4.1.3"><p id="zh-cn_topic_0000001173164765_p198802443316"><a name="zh-cn_topic_0000001173164765_p198802443316"></a><a name="zh-cn_topic_0000001173164765_p198802443316"></a>描述</p> 148</th> 149</tr> 150</thead> 151<tbody><tr id="zh-cn_topic_0000001173164765_row118991421721"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p1489911424212"><a name="zh-cn_topic_0000001173164765_p1489911424212"></a><a name="zh-cn_topic_0000001173164765_p1489911424212"></a>none<sup id="zh-cn_topic_0000001173164765_sup1967602632417"><a name="zh-cn_topic_0000001173164765_sup1967602632417"></a><a name="zh-cn_topic_0000001173164765_sup1967602632417"></a>6+</sup></p> 152</td> 153<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p2089924219219"><a name="zh-cn_topic_0000001173164765_p2089924219219"></a><a name="zh-cn_topic_0000001173164765_p2089924219219"></a>-</p> 154</td> 155<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p1389911421925"><a name="zh-cn_topic_0000001173164765_p1389911421925"></a><a name="zh-cn_topic_0000001173164765_p1389911421925"></a>不进行任何转换。</p> 156</td> 157</tr> 158<tr id="zh-cn_topic_0000001173164765_row7676184815318"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p136778482035"><a name="zh-cn_topic_0000001173164765_p136778482035"></a><a name="zh-cn_topic_0000001173164765_p136778482035"></a>matrix<sup id="zh-cn_topic_0000001173164765_sup4601727102410"><a name="zh-cn_topic_0000001173164765_sup4601727102410"></a><a name="zh-cn_topic_0000001173164765_sup4601727102410"></a>6+</sup></p> 159</td> 160<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p46778481138"><a name="zh-cn_topic_0000001173164765_p46778481138"></a><a name="zh-cn_topic_0000001173164765_p46778481138"></a><number></p> 161</td> 162<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p1067774812320"><a name="zh-cn_topic_0000001173164765_p1067774812320"></a><a name="zh-cn_topic_0000001173164765_p1067774812320"></a>入参为六个值的矩阵，6个值分别代表：scaleX, skewY, skewX, scaleY, translateX, translateY。</p> 163</td> 164</tr> 165<tr id="zh-cn_topic_0000001173164765_row148261231616"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p6826939618"><a name="zh-cn_topic_0000001173164765_p6826939618"></a><a name="zh-cn_topic_0000001173164765_p6826939618"></a>matrix3d<sup id="zh-cn_topic_0000001173164765_sup934382819242"><a name="zh-cn_topic_0000001173164765_sup934382819242"></a><a name="zh-cn_topic_0000001173164765_sup934382819242"></a>6+</sup></p> 166</td> 167<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p108261231861"><a name="zh-cn_topic_0000001173164765_p108261231861"></a><a name="zh-cn_topic_0000001173164765_p108261231861"></a><number></p> 168</td> 169<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p4826233618"><a name="zh-cn_topic_0000001173164765_p4826233618"></a><a name="zh-cn_topic_0000001173164765_p4826233618"></a>入参为十六个值的4X4矩阵。</p> 170</td> 171</tr> 172<tr id="zh-cn_topic_0000001173164765_row1588011441433"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p1188018441039"><a name="zh-cn_topic_0000001173164765_p1188018441039"></a><a name="zh-cn_topic_0000001173164765_p1188018441039"></a>translate</p> 173</td> 174<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p288015447310"><a name="zh-cn_topic_0000001173164765_p288015447310"></a><a name="zh-cn_topic_0000001173164765_p288015447310"></a><length><span id="zh-cn_topic_0000001173164765_ph168318101405"><a name="zh-cn_topic_0000001173164765_ph168318101405"></a><a name="zh-cn_topic_0000001173164765_ph168318101405"></a>| <percent></span></p> 175</td> 176<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p98811441934"><a name="zh-cn_topic_0000001173164765_p98811441934"></a><a name="zh-cn_topic_0000001173164765_p98811441934"></a>平移动画属性，支持设置x轴和y轴两个维度的平移参数。</p> 177</td> 178</tr> 179<tr id="zh-cn_topic_0000001173164765_row1587109072"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p658717916714"><a name="zh-cn_topic_0000001173164765_p658717916714"></a><a name="zh-cn_topic_0000001173164765_p658717916714"></a>translate3d<sup id="zh-cn_topic_0000001173164765_sup1636232912416"><a name="zh-cn_topic_0000001173164765_sup1636232912416"></a><a name="zh-cn_topic_0000001173164765_sup1636232912416"></a>6+</sup></p> 180</td> 181<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p1858749477"><a name="zh-cn_topic_0000001173164765_p1858749477"></a><a name="zh-cn_topic_0000001173164765_p1858749477"></a><length>| <percent></p> 182</td> 183<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p75871991872"><a name="zh-cn_topic_0000001173164765_p75871991872"></a><a name="zh-cn_topic_0000001173164765_p75871991872"></a>三个入参，分别代表X轴、Y轴、Z轴的平移距离。</p> 184</td> 185</tr> 186<tr id="zh-cn_topic_0000001173164765_row088154420311"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p1688124420315"><a name="zh-cn_topic_0000001173164765_p1688124420315"></a><a name="zh-cn_topic_0000001173164765_p1688124420315"></a>translateX</p> 187</td> 188<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p208813441237"><a name="zh-cn_topic_0000001173164765_p208813441237"></a><a name="zh-cn_topic_0000001173164765_p208813441237"></a><length><span id="zh-cn_topic_0000001173164765_ph108741224400"><a name="zh-cn_topic_0000001173164765_ph108741224400"></a><a name="zh-cn_topic_0000001173164765_ph108741224400"></a>| <percent></span></p> 189</td> 190<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p688112441132"><a name="zh-cn_topic_0000001173164765_p688112441132"></a><a name="zh-cn_topic_0000001173164765_p688112441132"></a>X轴方向平移动画属性。</p> 191</td> 192</tr> 193<tr id="zh-cn_topic_0000001173164765_row08816441839"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p1588110447311"><a name="zh-cn_topic_0000001173164765_p1588110447311"></a><a name="zh-cn_topic_0000001173164765_p1588110447311"></a>translateY</p> 194</td> 195<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p288118441533"><a name="zh-cn_topic_0000001173164765_p288118441533"></a><a name="zh-cn_topic_0000001173164765_p288118441533"></a><length><span id="zh-cn_topic_0000001173164765_ph2207350401"><a name="zh-cn_topic_0000001173164765_ph2207350401"></a><a name="zh-cn_topic_0000001173164765_ph2207350401"></a>| <percent></span></p> 196</td> 197<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p38818447314"><a name="zh-cn_topic_0000001173164765_p38818447314"></a><a name="zh-cn_topic_0000001173164765_p38818447314"></a>Y轴方向平移动画属性。</p> 198</td> 199</tr> 200<tr id="zh-cn_topic_0000001173164765_row88403013913"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p10840170391"><a name="zh-cn_topic_0000001173164765_p10840170391"></a><a name="zh-cn_topic_0000001173164765_p10840170391"></a>translateZ<sup id="zh-cn_topic_0000001173164765_sup1710163082419"><a name="zh-cn_topic_0000001173164765_sup1710163082419"></a><a name="zh-cn_topic_0000001173164765_sup1710163082419"></a>6+</sup></p> 201</td> 202<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p88408010916"><a name="zh-cn_topic_0000001173164765_p88408010916"></a><a name="zh-cn_topic_0000001173164765_p88408010916"></a><length>| <percent></p> 203</td> 204<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p1984090492"><a name="zh-cn_topic_0000001173164765_p1984090492"></a><a name="zh-cn_topic_0000001173164765_p1984090492"></a>Z轴的平移距离。</p> 205</td> 206</tr> 207<tr id="zh-cn_topic_0000001173164765_row288111441037"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p988164419317"><a name="zh-cn_topic_0000001173164765_p988164419317"></a><a name="zh-cn_topic_0000001173164765_p988164419317"></a>scale</p> 208</td> 209<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p0881744132"><a name="zh-cn_topic_0000001173164765_p0881744132"></a><a name="zh-cn_topic_0000001173164765_p0881744132"></a><number></p> 210</td> 211<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p5881114412312"><a name="zh-cn_topic_0000001173164765_p5881114412312"></a><a name="zh-cn_topic_0000001173164765_p5881114412312"></a>缩放动画属性，支持设置x轴和y轴两个维度的缩放参数。</p> 212</td> 213</tr> 214<tr id="zh-cn_topic_0000001173164765_row5893240595"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p88936401595"><a name="zh-cn_topic_0000001173164765_p88936401595"></a><a name="zh-cn_topic_0000001173164765_p88936401595"></a>scale3d<sup id="zh-cn_topic_0000001173164765_sup177701631152416"><a name="zh-cn_topic_0000001173164765_sup177701631152416"></a><a name="zh-cn_topic_0000001173164765_sup177701631152416"></a>6+</sup></p> 215</td> 216<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p18937401991"><a name="zh-cn_topic_0000001173164765_p18937401991"></a><a name="zh-cn_topic_0000001173164765_p18937401991"></a><number></p> 217</td> 218<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p1089317401198"><a name="zh-cn_topic_0000001173164765_p1089317401198"></a><a name="zh-cn_topic_0000001173164765_p1089317401198"></a>三个入参，分别代表X轴、Y轴、Z轴的缩放参数。</p> 219</td> 220</tr> 221<tr id="zh-cn_topic_0000001173164765_row088117445315"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p7881164417311"><a name="zh-cn_topic_0000001173164765_p7881164417311"></a><a name="zh-cn_topic_0000001173164765_p7881164417311"></a>scaleX</p> 222</td> 223<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p128816446311"><a name="zh-cn_topic_0000001173164765_p128816446311"></a><a name="zh-cn_topic_0000001173164765_p128816446311"></a><number></p> 224</td> 225<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p388112446310"><a name="zh-cn_topic_0000001173164765_p388112446310"></a><a name="zh-cn_topic_0000001173164765_p388112446310"></a>X轴方向缩放动画属性。</p> 226</td> 227</tr> 228<tr id="zh-cn_topic_0000001173164765_row78813444315"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p1988144419319"><a name="zh-cn_topic_0000001173164765_p1988144419319"></a><a name="zh-cn_topic_0000001173164765_p1988144419319"></a>scaleY</p> 229</td> 230<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p2881124416314"><a name="zh-cn_topic_0000001173164765_p2881124416314"></a><a name="zh-cn_topic_0000001173164765_p2881124416314"></a><number></p> 231</td> 232<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p128815441936"><a name="zh-cn_topic_0000001173164765_p128815441936"></a><a name="zh-cn_topic_0000001173164765_p128815441936"></a>Y轴方向缩放动画属性。</p> 233</td> 234</tr> 235<tr id="zh-cn_topic_0000001173164765_row19226926101018"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p1022752614102"><a name="zh-cn_topic_0000001173164765_p1022752614102"></a><a name="zh-cn_topic_0000001173164765_p1022752614102"></a>scaleZ<sup id="zh-cn_topic_0000001173164765_sup25801633192410"><a name="zh-cn_topic_0000001173164765_sup25801633192410"></a><a name="zh-cn_topic_0000001173164765_sup25801633192410"></a>6+</sup></p> 236</td> 237<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p1822742616107"><a name="zh-cn_topic_0000001173164765_p1822742616107"></a><a name="zh-cn_topic_0000001173164765_p1822742616107"></a><number></p> 238</td> 239<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p3227142611100"><a name="zh-cn_topic_0000001173164765_p3227142611100"></a><a name="zh-cn_topic_0000001173164765_p3227142611100"></a>Z轴的缩放参数。</p> 240</td> 241</tr> 242<tr id="zh-cn_topic_0000001173164765_row1488114441539"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p1888104411314"><a name="zh-cn_topic_0000001173164765_p1888104411314"></a><a name="zh-cn_topic_0000001173164765_p1888104411314"></a>rotate</p> 243</td> 244<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p168825447318"><a name="zh-cn_topic_0000001173164765_p168825447318"></a><a name="zh-cn_topic_0000001173164765_p168825447318"></a><deg> | <rad> | <grad><sup id="zh-cn_topic_0000001173164765_sup579512297266"><a name="zh-cn_topic_0000001173164765_sup579512297266"></a><a name="zh-cn_topic_0000001173164765_sup579512297266"></a>6+</sup> | <turn><sup id="zh-cn_topic_0000001173164765_sup819119310267"><a name="zh-cn_topic_0000001173164765_sup819119310267"></a><a name="zh-cn_topic_0000001173164765_sup819119310267"></a>6+</sup></p> 245</td> 246<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p8882194415317"><a name="zh-cn_topic_0000001173164765_p8882194415317"></a><a name="zh-cn_topic_0000001173164765_p8882194415317"></a>旋转动画属性<span id="zh-cn_topic_0000001173164765_ph146515256413"><a name="zh-cn_topic_0000001173164765_ph146515256413"></a><a name="zh-cn_topic_0000001173164765_ph146515256413"></a>，支持设置x轴和y轴两个维度的选中参数。</span></p> 247</td> 248</tr> 249<tr id="zh-cn_topic_0000001173164765_row227313741118"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p162731074115"><a name="zh-cn_topic_0000001173164765_p162731074115"></a><a name="zh-cn_topic_0000001173164765_p162731074115"></a>rotate3d<sup id="zh-cn_topic_0000001173164765_sup75616348243"><a name="zh-cn_topic_0000001173164765_sup75616348243"></a><a name="zh-cn_topic_0000001173164765_sup75616348243"></a>6+</sup></p> 250</td> 251<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p2273177114"><a name="zh-cn_topic_0000001173164765_p2273177114"></a><a name="zh-cn_topic_0000001173164765_p2273177114"></a><deg> | <rad> | <grad> | <turn></p> 252</td> 253<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p927318720114"><a name="zh-cn_topic_0000001173164765_p927318720114"></a><a name="zh-cn_topic_0000001173164765_p927318720114"></a>四个入参，前三个分别为X轴、Y轴、Z轴的旋转向量，第四个是旋转角度。</p> 254</td> 255</tr> 256<tr id="zh-cn_topic_0000001173164765_row188821744736"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p7882744632"><a name="zh-cn_topic_0000001173164765_p7882744632"></a><a name="zh-cn_topic_0000001173164765_p7882744632"></a>rotateX</p> 257</td> 258<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p78821744632"><a name="zh-cn_topic_0000001173164765_p78821744632"></a><a name="zh-cn_topic_0000001173164765_p78821744632"></a><deg> | <rad> | <grad><sup id="zh-cn_topic_0000001173164765_sup1349763518269"><a name="zh-cn_topic_0000001173164765_sup1349763518269"></a><a name="zh-cn_topic_0000001173164765_sup1349763518269"></a>6+</sup> | <turn><sup id="zh-cn_topic_0000001173164765_sup315743792618"><a name="zh-cn_topic_0000001173164765_sup315743792618"></a><a name="zh-cn_topic_0000001173164765_sup315743792618"></a>6+</sup></p> 259</td> 260<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p588217441134"><a name="zh-cn_topic_0000001173164765_p588217441134"></a><a name="zh-cn_topic_0000001173164765_p588217441134"></a>X轴方向旋转动画属性。</p> 261</td> 262</tr> 263<tr id="zh-cn_topic_0000001173164765_row1488294410320"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p108826442034"><a name="zh-cn_topic_0000001173164765_p108826442034"></a><a name="zh-cn_topic_0000001173164765_p108826442034"></a>rotateY</p> 264</td> 265<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p388213445311"><a name="zh-cn_topic_0000001173164765_p388213445311"></a><a name="zh-cn_topic_0000001173164765_p388213445311"></a><deg> | <rad> | <grad><sup id="zh-cn_topic_0000001173164765_sup136713509264"><a name="zh-cn_topic_0000001173164765_sup136713509264"></a><a name="zh-cn_topic_0000001173164765_sup136713509264"></a>6+</sup> | <turn><sup id="zh-cn_topic_0000001173164765_sup16487751122612"><a name="zh-cn_topic_0000001173164765_sup16487751122612"></a><a name="zh-cn_topic_0000001173164765_sup16487751122612"></a>6+</sup></p> 266</td> 267<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p8882544638"><a name="zh-cn_topic_0000001173164765_p8882544638"></a><a name="zh-cn_topic_0000001173164765_p8882544638"></a>Y轴方向旋转动画属性。</p> 268</td> 269</tr> 270<tr id="zh-cn_topic_0000001173164765_row25591113181511"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p195609136152"><a name="zh-cn_topic_0000001173164765_p195609136152"></a><a name="zh-cn_topic_0000001173164765_p195609136152"></a>rotateZ<sup id="zh-cn_topic_0000001173164765_sup93037363243"><a name="zh-cn_topic_0000001173164765_sup93037363243"></a><a name="zh-cn_topic_0000001173164765_sup93037363243"></a>6+</sup></p> 271</td> 272<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p25601136154"><a name="zh-cn_topic_0000001173164765_p25601136154"></a><a name="zh-cn_topic_0000001173164765_p25601136154"></a><deg> | <rad> | <grad> | <turn></p> 273</td> 274<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p956014135155"><a name="zh-cn_topic_0000001173164765_p956014135155"></a><a name="zh-cn_topic_0000001173164765_p956014135155"></a>Z轴方向的旋转角度。</p> 275</td> 276</tr> 277<tr id="zh-cn_topic_0000001173164765_row113601458141519"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p2036055818158"><a name="zh-cn_topic_0000001173164765_p2036055818158"></a><a name="zh-cn_topic_0000001173164765_p2036055818158"></a>skew<sup id="zh-cn_topic_0000001173164765_sup156881037172418"><a name="zh-cn_topic_0000001173164765_sup156881037172418"></a><a name="zh-cn_topic_0000001173164765_sup156881037172418"></a>6+</sup></p> 278</td> 279<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p1936055816154"><a name="zh-cn_topic_0000001173164765_p1936055816154"></a><a name="zh-cn_topic_0000001173164765_p1936055816154"></a><deg> | <rad> | <grad> | <turn></p> 280</td> 281<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p2360558151514"><a name="zh-cn_topic_0000001173164765_p2360558151514"></a><a name="zh-cn_topic_0000001173164765_p2360558151514"></a>两个入参，分别为X轴和Y轴的2D倾斜角度。</p> 282</td> 283</tr> 284<tr id="zh-cn_topic_0000001173164765_row1419525191617"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p11195185151618"><a name="zh-cn_topic_0000001173164765_p11195185151618"></a><a name="zh-cn_topic_0000001173164765_p11195185151618"></a>skewX<sup id="zh-cn_topic_0000001173164765_sup95893383244"><a name="zh-cn_topic_0000001173164765_sup95893383244"></a><a name="zh-cn_topic_0000001173164765_sup95893383244"></a>6+</sup></p> 285</td> 286<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p101951954163"><a name="zh-cn_topic_0000001173164765_p101951954163"></a><a name="zh-cn_topic_0000001173164765_p101951954163"></a><deg> | <rad> | <grad> | <turn></p> 287</td> 288<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p019510511168"><a name="zh-cn_topic_0000001173164765_p019510511168"></a><a name="zh-cn_topic_0000001173164765_p019510511168"></a>X轴的2D倾斜角度。</p> 289</td> 290</tr> 291<tr id="zh-cn_topic_0000001173164765_row1339081010166"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p239018103166"><a name="zh-cn_topic_0000001173164765_p239018103166"></a><a name="zh-cn_topic_0000001173164765_p239018103166"></a>skewY<sup id="zh-cn_topic_0000001173164765_sup16994402243"><a name="zh-cn_topic_0000001173164765_sup16994402243"></a><a name="zh-cn_topic_0000001173164765_sup16994402243"></a>6+</sup></p> 292</td> 293<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p83901110191616"><a name="zh-cn_topic_0000001173164765_p83901110191616"></a><a name="zh-cn_topic_0000001173164765_p83901110191616"></a><deg> | <rad> | <grad> | <turn></p> 294</td> 295<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p1139013100165"><a name="zh-cn_topic_0000001173164765_p1139013100165"></a><a name="zh-cn_topic_0000001173164765_p1139013100165"></a>Y轴的2D倾斜角度。</p> 296</td> 297</tr> 298<tr id="zh-cn_topic_0000001173164765_row15186755191516"><td class="cellrowborder" valign="top" width="18.04%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001173164765_p8186125512157"><a name="zh-cn_topic_0000001173164765_p8186125512157"></a><a name="zh-cn_topic_0000001173164765_p8186125512157"></a>perspective<sup id="zh-cn_topic_0000001173164765_sup12201741102411"><a name="zh-cn_topic_0000001173164765_sup12201741102411"></a><a name="zh-cn_topic_0000001173164765_sup12201741102411"></a>6+</sup></p> 299</td> 300<td class="cellrowborder" valign="top" width="27.71%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001173164765_p618610552153"><a name="zh-cn_topic_0000001173164765_p618610552153"></a><a name="zh-cn_topic_0000001173164765_p618610552153"></a><number></p> 301</td> 302<td class="cellrowborder" valign="top" width="54.25%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001173164765_p818755519156"><a name="zh-cn_topic_0000001173164765_p818755519156"></a><a name="zh-cn_topic_0000001173164765_p818755519156"></a>3D透视场景下镜头距离元素表面的距离。</p> 303</td> 304</tr> 305</tbody> 306</table> 307 308**表 2** @keyframes属性说明 309 310<a name="zh-cn_topic_0000001173164765_t48a722bba37a44c883ed4e046a4cf82e"></a> 311<table><thead align="left"><tr id="zh-cn_topic_0000001173164765_r856a9393ccf4423ba47ec1b9ed96bb8e"><th class="cellrowborder" valign="top" width="24.242424242424242%" id="mcps1.2.5.1.1"><p id="zh-cn_topic_0000001173164765_ae7a02418e61f4e1db82e64f0e2f1c09e"><a name="zh-cn_topic_0000001173164765_ae7a02418e61f4e1db82e64f0e2f1c09e"></a><a name="zh-cn_topic_0000001173164765_ae7a02418e61f4e1db82e64f0e2f1c09e"></a>名称</p> 312</th> 313<th class="cellrowborder" valign="top" width="17.581758175817583%" id="mcps1.2.5.1.2"><p id="zh-cn_topic_0000001173164765_a4cee3e18cb724963be38ac53355b7b4d"><a name="zh-cn_topic_0000001173164765_a4cee3e18cb724963be38ac53355b7b4d"></a><a name="zh-cn_topic_0000001173164765_a4cee3e18cb724963be38ac53355b7b4d"></a>类型</p> 314</th> 315<th class="cellrowborder" valign="top" width="11.71117111711171%" id="mcps1.2.5.1.3"><p id="zh-cn_topic_0000001173164765_a3e0026aad554469d964bbc102a8eaadb"><a name="zh-cn_topic_0000001173164765_a3e0026aad554469d964bbc102a8eaadb"></a><a name="zh-cn_topic_0000001173164765_a3e0026aad554469d964bbc102a8eaadb"></a>默认值</p> 316</th> 317<th class="cellrowborder" valign="top" width="46.464646464646464%" id="mcps1.2.5.1.4"><p id="zh-cn_topic_0000001173164765_a2b58cc16430e4420b7e9ab323cab292d"><a name="zh-cn_topic_0000001173164765_a2b58cc16430e4420b7e9ab323cab292d"></a><a name="zh-cn_topic_0000001173164765_a2b58cc16430e4420b7e9ab323cab292d"></a>描述</p> 318</th> 319</tr> 320</thead> 321<tbody><tr id="zh-cn_topic_0000001173164765_r452ea683f0af4624a69c836abfcdc440"><td class="cellrowborder" valign="top" width="24.242424242424242%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001173164765_a5eb36c26384742ba9e99adc2493de600"><a name="zh-cn_topic_0000001173164765_a5eb36c26384742ba9e99adc2493de600"></a><a name="zh-cn_topic_0000001173164765_a5eb36c26384742ba9e99adc2493de600"></a>background-color</p> 322</td> 323<td class="cellrowborder" valign="top" width="17.581758175817583%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001173164765_abc67b94bfbcb4d64a00cfe2e1e372b6d"><a name="zh-cn_topic_0000001173164765_abc67b94bfbcb4d64a00cfe2e1e372b6d"></a><a name="zh-cn_topic_0000001173164765_abc67b94bfbcb4d64a00cfe2e1e372b6d"></a><color></p> 324</td> 325<td class="cellrowborder" valign="top" width="11.71117111711171%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001173164765_ab027f70b389742bbb69fa1665a1aaaf6"><a name="zh-cn_topic_0000001173164765_ab027f70b389742bbb69fa1665a1aaaf6"></a><a name="zh-cn_topic_0000001173164765_ab027f70b389742bbb69fa1665a1aaaf6"></a>-</p> 326</td> 327<td class="cellrowborder" valign="top" width="46.464646464646464%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001173164765_a2a9535e7a520474eaa5ca78ca61ca148"><a name="zh-cn_topic_0000001173164765_a2a9535e7a520474eaa5ca78ca61ca148"></a><a name="zh-cn_topic_0000001173164765_a2a9535e7a520474eaa5ca78ca61ca148"></a>动画执行后应用到组件上的背景颜色。</p> 328</td> 329</tr> 330<tr id="zh-cn_topic_0000001173164765_rb2e92403cacf4ce283fd5e3c625635c5"><td class="cellrowborder" valign="top" width="24.242424242424242%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001173164765_afd219ea8c1384a3c84d4e7ca09be073c"><a name="zh-cn_topic_0000001173164765_afd219ea8c1384a3c84d4e7ca09be073c"></a><a name="zh-cn_topic_0000001173164765_afd219ea8c1384a3c84d4e7ca09be073c"></a>opacity</p> 331</td> 332<td class="cellrowborder" valign="top" width="17.581758175817583%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001173164765_a89cf6dcf06954b37a77fb21ff2140188"><a name="zh-cn_topic_0000001173164765_a89cf6dcf06954b37a77fb21ff2140188"></a><a name="zh-cn_topic_0000001173164765_a89cf6dcf06954b37a77fb21ff2140188"></a>number</p> 333</td> 334<td class="cellrowborder" valign="top" width="11.71117111711171%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001173164765_a2718c52ec5574f49a263ccd45d448656"><a name="zh-cn_topic_0000001173164765_a2718c52ec5574f49a263ccd45d448656"></a><a name="zh-cn_topic_0000001173164765_a2718c52ec5574f49a263ccd45d448656"></a>1</p> 335</td> 336<td class="cellrowborder" valign="top" width="46.464646464646464%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001173164765_a6bcdedbaaa87470cae3e3beea1b67aad"><a name="zh-cn_topic_0000001173164765_a6bcdedbaaa87470cae3e3beea1b67aad"></a><a name="zh-cn_topic_0000001173164765_a6bcdedbaaa87470cae3e3beea1b67aad"></a>动画执行后应用到组件上的不透明度值，为介于0到1间的数值，默认为1。</p> 337</td> 338</tr> 339<tr id="zh-cn_topic_0000001173164765_row13625142317305"><td class="cellrowborder" valign="top" width="24.242424242424242%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001173164765_p116261023163017"><a name="zh-cn_topic_0000001173164765_p116261023163017"></a><a name="zh-cn_topic_0000001173164765_p116261023163017"></a>width</p> 340</td> 341<td class="cellrowborder" valign="top" width="17.581758175817583%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001173164765_p5647133543013"><a name="zh-cn_topic_0000001173164765_p5647133543013"></a><a name="zh-cn_topic_0000001173164765_p5647133543013"></a><length></p> 342</td> 343<td class="cellrowborder" valign="top" width="11.71117111711171%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001173164765_p13626202319305"><a name="zh-cn_topic_0000001173164765_p13626202319305"></a><a name="zh-cn_topic_0000001173164765_p13626202319305"></a>-</p> 344</td> 345<td class="cellrowborder" valign="top" width="46.464646464646464%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001173164765_p562617236301"><a name="zh-cn_topic_0000001173164765_p562617236301"></a><a name="zh-cn_topic_0000001173164765_p562617236301"></a>动画执行后应用到组件上的宽度值。</p> 346</td> 347</tr> 348<tr id="zh-cn_topic_0000001173164765_rf77cedb94a3c4c9a8556a2a2a3876997"><td class="cellrowborder" valign="top" width="24.242424242424242%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001173164765_a2f05af1c56e34ed4aa900b467dcf3bb7"><a name="zh-cn_topic_0000001173164765_a2f05af1c56e34ed4aa900b467dcf3bb7"></a><a name="zh-cn_topic_0000001173164765_a2f05af1c56e34ed4aa900b467dcf3bb7"></a>height</p> 349</td> 350<td class="cellrowborder" valign="top" width="17.581758175817583%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001173164765_af3cdb37ab1cc46ac823bee3784909613"><a name="zh-cn_topic_0000001173164765_af3cdb37ab1cc46ac823bee3784909613"></a><a name="zh-cn_topic_0000001173164765_af3cdb37ab1cc46ac823bee3784909613"></a><length></p> 351</td> 352<td class="cellrowborder" valign="top" width="11.71117111711171%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001173164765_a35aa8df3690b4b169f67360826114e7f"><a name="zh-cn_topic_0000001173164765_a35aa8df3690b4b169f67360826114e7f"></a><a name="zh-cn_topic_0000001173164765_a35aa8df3690b4b169f67360826114e7f"></a>-</p> 353</td> 354<td class="cellrowborder" valign="top" width="46.464646464646464%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001173164765_a0ecbff2f02ac42ffb797b9bcae919003"><a name="zh-cn_topic_0000001173164765_a0ecbff2f02ac42ffb797b9bcae919003"></a><a name="zh-cn_topic_0000001173164765_a0ecbff2f02ac42ffb797b9bcae919003"></a>动画执行后应用到组件上的高度值。</p> 355</td> 356</tr> 357<tr id="zh-cn_topic_0000001173164765_r43ece702a1c945f08cd7eb195b5faac3"><td class="cellrowborder" valign="top" width="24.242424242424242%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001173164765_aa51ca83ead4c4c00b078f3d2c1e7e66b"><a name="zh-cn_topic_0000001173164765_aa51ca83ead4c4c00b078f3d2c1e7e66b"></a><a name="zh-cn_topic_0000001173164765_aa51ca83ead4c4c00b078f3d2c1e7e66b"></a>transform</p> 358</td> 359<td class="cellrowborder" valign="top" width="17.581758175817583%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001173164765_a44aec140ddba46b19c96be3ef58468c6"><a name="zh-cn_topic_0000001173164765_a44aec140ddba46b19c96be3ef58468c6"></a><a name="zh-cn_topic_0000001173164765_a44aec140ddba46b19c96be3ef58468c6"></a>string</p> 360</td> 361<td class="cellrowborder" valign="top" width="11.71117111711171%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001173164765_af2ea25b4333d490d9723dec6c6d1709f"><a name="zh-cn_topic_0000001173164765_af2ea25b4333d490d9723dec6c6d1709f"></a><a name="zh-cn_topic_0000001173164765_af2ea25b4333d490d9723dec6c6d1709f"></a>-</p> 362</td> 363<td class="cellrowborder" valign="top" width="46.464646464646464%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001173164765_adff3debf36764e5c868ca9823663cd5b"><a name="zh-cn_topic_0000001173164765_adff3debf36764e5c868ca9823663cd5b"></a><a name="zh-cn_topic_0000001173164765_adff3debf36764e5c868ca9823663cd5b"></a>定义应用在组件上的变换类型，见<a href="#zh-cn_topic_0000001173164765_table28802443315">表1</a>。</p> 364</td> 365</tr> 366<tr id="zh-cn_topic_0000001173164765_row1745310341966"><td class="cellrowborder" valign="top" width="24.242424242424242%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001173164765_p6453634366"><a name="zh-cn_topic_0000001173164765_p6453634366"></a><a name="zh-cn_topic_0000001173164765_p6453634366"></a>background-position<sup id="zh-cn_topic_0000001173164765_sup736717438275"><a name="zh-cn_topic_0000001173164765_sup736717438275"></a><a name="zh-cn_topic_0000001173164765_sup736717438275"></a>6+</sup></p> 367</td> 368<td class="cellrowborder" valign="top" width="17.581758175817583%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001173164765_p1552710366310"><a name="zh-cn_topic_0000001173164765_p1552710366310"></a><a name="zh-cn_topic_0000001173164765_p1552710366310"></a>string | <percentage> | <length> string | <percentage> | <length></p> 369</td> 370<td class="cellrowborder" valign="top" width="11.71117111711171%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001173164765_p34533341167"><a name="zh-cn_topic_0000001173164765_p34533341167"></a><a name="zh-cn_topic_0000001173164765_p34533341167"></a>50% 50%</p> 371</td> 372<td class="cellrowborder" valign="top" width="46.464646464646464%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001173164765_p14867144143014"><a name="zh-cn_topic_0000001173164765_p14867144143014"></a><a name="zh-cn_topic_0000001173164765_p14867144143014"></a>背景图位置。单位支持百分比和px，第一个值是水平位置，第二个值是垂直位置。如果仅设置一个值，另一个值为50%。第一个string的可选值为：left | center | right ，第二个string的可选值为：top | center | bottom。</p> 373<p id="zh-cn_topic_0000001173164765_p1345315341569"><a name="zh-cn_topic_0000001173164765_p1345315341569"></a><a name="zh-cn_topic_0000001173164765_p1345315341569"></a>示例：</p> 374<a name="zh-cn_topic_0000001173164765_ul19908143113422"></a><a name="zh-cn_topic_0000001173164765_ul19908143113422"></a><ul id="zh-cn_topic_0000001173164765_ul19908143113422"><li>background-position: 200px 30%</li><li>background-position: 100px top</li><li>background-position: center center</li></ul> 375</td> 376</tr> 377</tbody> 378</table> 379 380对于不支持起始值或终止值缺省的情况，可以通过from和to显示指定起始和结束。可以通过百分比指定动画运行的中间状态<sup>6+</sup>。示例： 381 382``` 383<div class="container"> 384 <div class="rect"> 385 </div> 386</div> 387``` 388 389``` 390.container { 391 display: flex; 392 justify-content: center; 393 align-items: center; 394} 395.rect{ 396 width: 200px; 397 height: 200px; 398 background-color: #f76160; 399 animation: Go 3s infinite; 400} 401@keyframes Go 402{ 403 from { 404 background-color: #f76160; 405 transform:translate(100px) rotate(0deg) scale(1.0); 406 } 407 /* 可以通过百分比指定动画运行的中间状态6+ */ 408 50% { 409 background-color: #f76160; 410 transform:translate(100px) rotate(60deg) scale(1.3); 411 } 412 to { 413 background-color: #09ba07; 414 transform:translate(100px) rotate(180deg) scale(2.0); 415 } 416} 417``` 418 419 420 421``` 422<!-- xxx.hml --> 423<div class="container"> 424 <div class="simpleAnimation simpleSize" style="animation-play-state: {{playState}}"></div> 425 <text onclick="toggleState">animation-play-state: {{playState}}</text> 426</div> 427``` 428 429``` 430/* xxx.css */ 431.container { 432 flex-direction: column; 433 justify-content: center; 434 align-items: center; 435} 436.simpleSize { 437 background-color: blue; 438 width: 100px; 439 height: 100px; 440} 441.simpleAnimation { 442 animation: simpleFrames 9s; 443} 444@keyframes simpleFrames { 445 from { transform: translateX(0px); } 446 to { transform: translateX(100px); } 447} 448``` 449 450``` 451// xxx.js 452export default { 453 data: { 454 title: "", 455 playState: "running" 456 }, 457 toggleState() { 458 if (this.playState === "running") { 459 this.playState = "paused"; 460 } else { 461 this.playState = "running"; 462 } 463 } 464} 465``` 466 467 468 469``` 470<!-- xxx.hml --> 471<div id='img' class="img"></div> 472``` 473 474``` 475/* xxx.css */ 476.img { 477 width: 294px; 478 height: 233px; 479 background-image: url('common/heartBeat.jpg'); 480 background-repeat: no-repeat; 481 background-position: 0% 0%; 482 background-size: 900%; 483 animation-name: heartBeating; 484 animation-duration: 1s; 485 animation-delay: 0s; 486 animation-fill-mode: forwards; 487 animation-iteration-count: -1; 488 animation-timing-function: steps(8, end); 489} 490 491@keyframes heartBeating { 492 from { background-position: 0% 0%;} 493 to { background-position: 100% 0%;} 494} 495``` 496 497``` 498<!-- xxx.hml --> 499<div class="container"> 500 <div class="content"></div> 501</div> 502``` 503 504``` 505/* xxx.css */ 506.container { 507 flex-direction: column; 508 justify-content: center; 509 align-items: center; 510} 511.content { /* 组件状态1 */ 512 height: 200px; 513 width: 200px; 514 background-color: red; 515 transition: all 5s ease 0s; 516} 517.content:active { /* 组件状态2 */ 518 height: 400px; 519 width: 400px; 520 background-color: blue; 521 transition: all 5s linear 0s; 522} 523``` 524 525 526 527> **说明：** 528>@keyframes的from/to不支持动态绑定。 529>steps函数的end和start含义如下图所示。 530> 531 532
