1# 动画样式 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9 10组件支持通过style或css设置动态的旋转、平移及缩放效果。 11 12 13| 名称 | 类型 | 默认值 | 描述 | 14| ------------------------- | ---------------------------------- | ----------- | ---------------------------------------- | 15| transform | string | - | 详见表1。 | 16| animation-name | string | - | 指定\@keyframes，详见表2。 | 17| animation-delay | <time> | 0 | 定义动画播放的延迟时间。支持的单位为[s(秒)\|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。 | 18| animation-duration | <time> | 0 | 定义一个动画周期。支持的单位为[s(秒)\|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。<br/>**说明：**<br/>animation-duration 样式必须设置，否则时长为 0，则不会播放动画。 | 19| animation-iteration-count | number \| infinite | 1 | 定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。 | 20| animation-timing-function | string | <br/>linear | 描述动画执行的速度曲线，用于使动画更为平滑。<br/>可选项有：<br/>- linear：表示动画从头到尾的速度都是相同的。<br/>- ease-in：表示动画以低速开始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。<br/>- ease-out：表示动画以低速结束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。<br/>- ease-in-out：表示动画以低速开始和结束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。 | 21| animation-fill-mode | string | none | 指定动画开始和结束的状态：<br/>- none：在动画执行之前和之后都不会应用任何样式到目标上。<br/>- forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。 | 22 23 24 **表1** transform操作说明 25 26| 名称 | 类型 | 描述 | 27| ---------- | ------------------------------------ | ---------- | 28| translateX | <length> | X轴方向平移动画属性 | 29| translateY | <length> | Y轴方向平移动画属性 | 30| rotate | <deg> \| <rad> | 旋转动画属性 | 31 32> **说明：** 33> 34> 轻量级智能穿戴仅支持原始大小的图片进行旋转。 35 36 37 **表2** \@keyframes属性说明 38 39| 名称 | 类型 | 默认值 | 描述 | 40| ---------------- | -------------- | ---- | ------------------ | 41| background-color | <color> | - | 动画执行后应用到组件上的背景颜色。 | 42| width | <length> | - | 动画执行后应用到组件上的宽度值。 | 43| height | <length> | - | 动画执行后应用到组件上的高度值。 | 44| transform | string | - | 定义应用在组件上的变换类型，见表1。 | 45 46 47对于不支持起始值或终止值缺省的情况，可以通过from和to显示指定起始和结束。示例： 48 49 50```css 51@keyframes Go 52{ 53 from { 54 background-color: #f76160; 55 } 56 to { 57 background-color: #09ba07; 58 } 59} 60``` 61 62 63 64 65 66 67 68 69> **说明：** 70> 71> \@keyframes的from/to不支持动态绑定。 72
