HarmonyOS应用开发文档更新修改说明：动画样式补充示例代码和示例效果图，方便开发者掌握动画的使用方式。
组件普遍支持的可以在style或css中设置的动态的旋转、平移、缩放效果。
名称
类型
默认值
描述
transform-origin
<position>
控件中心
变换对象的原点位置，支持px和百分比(相对于动画目标组件)，格式为：50px 100px 或 50% 50%。
transform
string
-
支持同时设置平移/旋转/缩放的属性
详见表1。
animation-name
string
-
指定@keyframes，详见表2。
animation-delay
<time>
0
定义动画播放的延迟时间。支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。
animation-duration
<time>
0
定义一个动画周期。支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。
说明
animation-duration 样式必须设置，否则时长为 0，则不会播放动画。
animation-iteration-count
number | infinite
1
定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。
animation-timing-function
string
ease
描述动画执行的速度曲线，用于使动画更为平滑。
可选项有：
* linear：表示动画从头到尾的速度都是相同的。
* ease：表示动画以低速开始，然后加快，在结束前变慢，cubic-bezier(0.25, 0.1, 0.25, 1.0)。
* ease-in：表示动画以低速开始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。
* ease-out：表示动画以低速结束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。
* ease-in-out：表示动画以低速开始和结束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。
* friction：阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。
* extreme-deceleration：急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。
* sharp：锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。
* rhythm：节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。
* smooth：平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。
* cubic-bezier：在三次贝塞尔函数中定义动画变化过程，入参的x和y值必须处于0-1之间。
animation-fill-mode
string
none
指定动画执行结束后的状态。可选项有：
* none：恢复初始状态。
* forwards：保持动画结束时的状态（在最后一个关键帧中定义）。
<> <>
表1 transform操作说明
名称
类型
描述
translate
<length>| <percent>
平移动画属性，支持设置x轴和y轴两个维度的平移参数
translateX
<length>| <percent>
X轴方向平移动画属性
translateY
<length>| <percent>
Y轴方向平移动画属性
scale
<number>
缩放动画属性，支持设置x轴和y轴两个维度的缩放参数
scaleX
<number>
X轴方向缩放动画属性
scaleY
<number>
Y轴方向缩放动画属性
rotate
<deg> | <rad>
旋转动画属性，支持设置x轴和y轴两个维度的选中参数
rotateX
<deg> | <rad>
X轴方向旋转动画属性
rotateY
<deg> | <rad>
Y轴方向旋转动画属性
<> <>
表2 @keyframes属性说明
名称
类型
默认值
描述
background-color
<color>
-
动画执行后应用到组件上的背景颜色。
opacity
number
1
动画执行后应用到组件上的不透明度值，为介于0到1间的数值，默认为1。
width
<length>
-
动画执行后应用到组件上的宽度值。
height
<length>
-
动画执行后应用到组件上的高度值。
transform
string
-
定义应用在组件上的变换类型，见表1。
对于不支持起始值或终止值缺省的情况，可以通过from和to显示指定起始和结束。示例：
@keyframes Go { from { background-color: #f76160; transform:translate(0px)
rotate(0deg) scale(1.0); } to { background-color: #09ba07;
transform:translate(100px) rotate(180deg) scale(2.0); } }
说明：
@keyframes的from/to不支持动态绑定。
技术
今日推荐