Lynx
指引
API
博客
贡献
指引
API
博客
贡献
简体中文

animation

介绍

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

使用示例

css-apisrc/animation/App.tsx
预览

语法

/* @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>;

动画事件

扩展阅读

兼容性

LCD tables only load in the browser

除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。