动画样式

组件支持通过style或css设置动态的旋转、平移及缩放效果。

名称	类型	默认值	描述
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	linear	描述动画执行的速度曲线，用于使动画更为平滑。可选项有： - linear：表示动画从头到尾的速度都是相同的。 - 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)。
animation-fill-mode	string	none	指定动画开始和结束的状态： - none：在动画执行之前和之后都不会应用任何样式到目标上。 - forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。

表1 transform操作说明

说明：

轻量级智能穿戴仅支持原始大小的图片进行旋转。

表2 @keyframes属性说明

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

@keyframes Go
{
   from {
     background-color: #f76160;
   }
   to {
     background-color: #09ba07;
   }
}

动画样式demo1

说明：

@keyframes的from/to不支持动态绑定。

你可能感兴趣的鸿蒙文章