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;

注意事项

Caution

在写 CSS @keyframes 时，建议不要省略 0% (或者叫 from) 阶段和 100% (或者叫 to) 阶段的值。若起始阶段和结束阶段的值没有指定，我们会使用节点的当前属性值，由于系统限制，Android 系统的 transform 属性可能会有问题。

形式定义

初始值	animation-name: none animation-duration: 0s animation-timing-function: ease animation-delay: 0s animation-iteration-count: 1 animation-direction: normal animation-fill-mode: none animation-play-state: running
适用元素	all elements
是否支持继承	no
是否支持动画	no

形式语法

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

介绍

使用示例

语法

注意事项

形式定义

形式语法

动画事件

扩展阅读

兼容性