animation

介绍

animation 属性是animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction ,animation-fill-mode, animation-play-state 属性的一个简写属性形式。

标准化语法

animation 可以指定多组动画，每组动画内属性使用空格分隔，每组动画之间使用逗号分隔。

animation: <animation-name> || <animation-duration> || <animation-timing-function> ||
    <animation-delay> || <animation-iteration-count> || <animation-direction> ||
    <animation-fill-mode> || <animation-play-state>;

样例：

/* @keyframes name | duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state*/
animation: slidein 3s ease-in 1s 2 reverse both paused;

/* @keyframes name | duration | timing-function | delay */
animation: slidein 3s linear 1s;

/* @keyframes name | duration */
animation: slidein 3s;

/* Multiple animations */
animation: slidein 3s ease-in 1s 2 reverse both paused, ani_scale 3s linear 1s;

与 Web 的区别

注意

• animation仅支持对transform, background-color, opacity做动画

扩展阅读

• animation
• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

注意事项

• 如果是动态设置的动画属性，需要在节点标记 flatten="false" 属性
• 如果 iOS 显示效果不符合预期，在节点标记 implicit-animation="false" 属性