当前位置: 首页 > 工具软件 > Animate.css > 使用案例 >

【css】animate.css使用指南

谭彦
2023-12-01

前言

  • 最近我需要将animate.css整合进dooring中做成动画,毕竟这玩意自己写太累,而且写的效果可能也不是很自然。

安装

  • 官网:https://animate.style/
  • npm 或者yarn 安装即可。https://www.npmjs.com/package/animate.css

使用

  • 引入animate.css 使用link或者直接引入都可以。
  • 然后加类名即可。
import 'animate.css';
        <div
          style={{ width: 300 }}
          className="animate__animated animate__bounce animate__delay-2s"
        >
          2312312
        </div>
  • 这样就有弹跳效果。

类名归类

animate__animated

  • 首先,必须加上.animate__animated类,
  • 看了下这个类写的都是设定的全局变量什么的。所以一开始得加上。

animate__动画名

  • 第二,加上动画名。
  • 这个动画名太多了,在上面官网查找。

首次延迟

  • 在延迟多少后开始动画,默认有以下几种。
animate__delay-2s	2s
animate__delay-3s	3s
animate__delay-4s	4s
animate__delay-5s	5s

动画速度

  • 动画运行速度,实际上就是拿默认的动画速度计算下。
animate__slow	2s
animate__slower	3s
animate__fast	800ms
animate__faster	500ms

重复次数

  • 有以下几种,最常用的当然是无限了。
animate__repeat-1	1
animate__repeat-2	2
animate__repeat-3	3
animate__infinite	infinite

开始位置与结束位置

  • fill-mode :https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
  • 默认都为both,有需要自己改。
  • forwards与both区别就是both会应用第一帧状态,而forwards不会。
 类似资料: