未验证 提交 c1924865 编写于 作者: O openharmony_ci 提交者: Gitee

!6486 【轻量级 PR】:JS组件--动画样式(js-components-common-animation.md)格式规范统一

Merge pull request !6486 from 黄秋怡/master
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
| animation-name | string | - | 指定\@keyframes,详见表 @keyframes属性说明。 | | animation-name | string | - | 指定\@keyframes,详见表 @keyframes属性说明。 |
| animation-delay | <time> | 0 | 定义动画播放的延迟时间。支持的单位为[s(秒)\|ms(毫秒) ],默认单位为ms,格式为:1000ms或1s。 | | animation-delay | <time> | 0 | 定义动画播放的延迟时间。支持的单位为[s(秒)\|ms(毫秒) ],默认单位为ms,格式为:1000ms或1s。 |
| animation-duration | &lt;time&gt; | 0 | 定义一个动画周期。支持的单位为[s(秒)\|ms(毫秒)&nbsp;],默认单位为ms,格式为:1000ms或1s。<br/>必须设置animation-duration&nbsp;样式,否则时长为&nbsp;0将不会播放动画。 | | animation-duration | &lt;time&gt; | 0 | 定义一个动画周期。支持的单位为[s(秒)\|ms(毫秒)&nbsp;],默认单位为ms,格式为:1000ms或1s。<br/>必须设置animation-duration&nbsp;样式,否则时长为&nbsp;0将不会播放动画。 |
| animation-iteration-count | number&nbsp;&nbsp;\|&nbsp;infinite | 1 | 定义动画播放的次数,默认播放一次,可通过设置为infinite无限次播放。 | | animation-iteration-count | number&nbsp;\|&nbsp;infinite | 1 | 定义动画播放的次数,默认播放一次,可通过设置为infinite无限次播放。 |
| animation-timing-function | string | ease<br/> | 描述动画执行的速度曲线,用于使动画更为平滑。<br/>可选项有:<br/>-&nbsp;linear:表示动画从头到尾的速度都是相同的。<br/>-&nbsp;ease:表示动画以低速开始,然后加快,在结束前变慢,cubic-bezier(0.25,&nbsp;0.1,&nbsp;0.25,&nbsp;1.0)。<br/>-&nbsp;ease-in:表示动画以低速开始,cubic-bezier(0.42,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)。<br/>-&nbsp;ease-out:表示动画以低速结束,cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。<br/>-&nbsp;ease-in-out:表示动画以低速开始和结束,cubic-bezier(0.42,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。<br/>-&nbsp;friction:阻尼曲线,cubic-bezier(0.2,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。<br/>-&nbsp;extreme-deceleration:急缓曲线,cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.0,&nbsp;1.0)。<br/>-&nbsp;sharp:锐利曲线,cubic-bezier(0.33,&nbsp;0.0,&nbsp;0.67,&nbsp;1.0)。<br/>-&nbsp;rhythm:节奏曲线,cubic-bezier(0.7,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。<br/>-&nbsp;smooth:平滑曲线,cubic-bezier(0.4,&nbsp;0.0,&nbsp;0.4,&nbsp;1.0)。<br/>-&nbsp;cubic-bezier:在三次贝塞尔函数中定义动画变化过程,入参的x和y值必须处于0-1之间。<br/>-&nbsp;steps:&nbsp;阶梯曲线<sup>6+</sup>。语法:steps(number[,&nbsp;end\|start]);number必须设置,支持的类型为正整数。第二个参数可选,表示在每个间隔的起点或是终点发生阶跃变化,支持设置end或start,默认值为end。 | | animation-timing-function | string | ease<br/> | 描述动画执行的速度曲线,用于使动画更为平滑。<br/>可选项有:<br/>-&nbsp;linear:表示动画从头到尾的速度都是相同的。<br/>-&nbsp;ease:表示动画以低速开始,然后加快,在结束前变慢,cubic-bezier(0.25,&nbsp;0.1,&nbsp;0.25,&nbsp;1.0)。<br/>-&nbsp;ease-in:表示动画以低速开始,cubic-bezier(0.42,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)。<br/>-&nbsp;ease-out:表示动画以低速结束,cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。<br/>-&nbsp;ease-in-out:表示动画以低速开始和结束,cubic-bezier(0.42,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。<br/>-&nbsp;friction:阻尼曲线,cubic-bezier(0.2,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。<br/>-&nbsp;extreme-deceleration:急缓曲线,cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.0,&nbsp;1.0)。<br/>-&nbsp;sharp:锐利曲线,cubic-bezier(0.33,&nbsp;0.0,&nbsp;0.67,&nbsp;1.0)。<br/>-&nbsp;rhythm:节奏曲线,cubic-bezier(0.7,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。<br/>-&nbsp;smooth:平滑曲线,cubic-bezier(0.4,&nbsp;0.0,&nbsp;0.4,&nbsp;1.0)。<br/>-&nbsp;cubic-bezier:在三次贝塞尔函数中定义动画变化过程,入参的x和y值必须处于0-1之间。<br/>-&nbsp;steps:&nbsp;阶梯曲线<sup>6+</sup>。语法:steps(number[,&nbsp;end\|start]);number必须设置,支持的类型为正整数。第二个参数可选,表示在每个间隔的起点或是终点发生阶跃变化,支持设置end或start,默认值为end。 |
| animation-direction<sup>6+</sup> | string | normal | 指定动画的播放模式:<br/>-&nbsp;normal:&nbsp;动画正向循环播放。<br/>-&nbsp;reverse:&nbsp;动画反向循环播放。<br/>-&nbsp;alternate:动画交替循环播放,奇数次正向播放,偶数次反向播放。<br/>-&nbsp;alternate-reverse:动画反向交替循环播放,奇数次反向播放,偶数次正向播放。 | | animation-direction<sup>6+</sup> | string | normal | 指定动画的播放模式:<br/>-&nbsp;normal:&nbsp;动画正向循环播放。<br/>-&nbsp;reverse:&nbsp;动画反向循环播放。<br/>-&nbsp;alternate:动画交替循环播放,奇数次正向播放,偶数次反向播放。<br/>-&nbsp;alternate-reverse:动画反向交替循环播放,奇数次反向播放,偶数次正向播放。 |
| animation-fill-mode | string | none | 指定动画开始和结束的状态:<br/>-&nbsp;none:在动画执行之前和之后都不会应用任何样式到目标上。<br/>-&nbsp;forwards:在动画结束后,目标将保留动画结束时的状态(在最后一个关键帧中定义)。<br/>-&nbsp;backwards<sup>6+</sup>:动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值,当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。<br/>-&nbsp;both<sup>6+</sup>:动画将遵循forwards和backwards的规则,从而在两个方向上扩展动画属性。 | | animation-fill-mode | string | none | 指定动画开始和结束的状态:<br/>-&nbsp;none:在动画执行之前和之后都不会应用任何样式到目标上。<br/>-&nbsp;forwards:在动画结束后,目标将保留动画结束时的状态(在最后一个关键帧中定义)。<br/>-&nbsp;backwards<sup>6+</sup>:动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值,当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。<br/>-&nbsp;both<sup>6+</sup>:动画将遵循forwards和backwards的规则,从而在两个方向上扩展动画属性。 |
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册