【css】animate.css使用指南

前言

• 最近我需要将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不会。