使用 animate 关键字为属性声明动画，如下所示：

export component Example inherits Window {    preferred-width: 100px;    preferred-height: 100px;
    background: area.pressed ? blue : red;    animate background {        duration: 250ms;    }
    area := TouchArea {}}

每当 color 属性发生变化时，都会以 250 毫秒的时长为其添加动画。

也可以使用同一个动画对多个属性进行动画处理，例如：

animate x, y { duration: 100ms; easing: ease-out-bounce; }

等同于：

animate x { duration: 100ms; easing: ease-out-bounce; }animate y { duration: 100ms; easing: ease-out-bounce; }

可以使用以下参数对动画进行微调：

delay

duration default: 0ms

启动动画之前需要等待的时间。

duration

duration default: 0ms

动画完成所需的时长。

iteration-count

float default: 0.0

动画应运行的次数。负值表示 无限次重复运行。可以使用小数值。 对于永久运行的动画，请参阅 animation-tick()。

easing

easing default: linear

可以是以下任意值。可在 easings.net 查看可视化参考：

direction

enum AnimationDirection default: the first enum value

使用此参数设置或更改动画的方向。

AnimationDirection

此枚举描述动画的方向。

• normal：CSS 中定义的 “normal” 方向。
• reverse：CSS 中定义的 “reverse” 方向。
• alternate：CSS 中定义的 “alternate” 方向。
• alternate-reverse：CSS 中定义的 “alternate-reverse” 方向。