Animate.css

官网：https://animate.style/

CDN：https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css

Animate.css 库提供了大量的动画效果，开发者仅需使用它提供的类名即可

注意：animate.css 中的动画对行盒无效

基本使用

类名格式为：

animate__animated animate__效果名

效果名分为以下几个大类，你可以从官网中找到对应的分类，每个分类下有多种效果名可供使用

工具类

Animate.css 还提供了多个工具类，可以控制动画的延时、重复次数、速度

• 延时

  /* 默认无延时 */
  animate__delay-1s  /* 延时1秒 */
  animate__delay-2s  /* 延时2秒 */
  animate__delay-3s  /* 延时3秒 */
  animate__delay-4s  /* 延时4秒 */
  animate__delay-5s  /* 延时5秒 */
  

• 重复次数

  /* 默认重复1次 */
  animate__repeat-2	/* 重复2次 */
  animate__repeat-3	/* 重复3次 */
  animate__infinite	/* 重复无限次 */
  

• 速度

  /* 默认1秒内完成动画 */
  animate__slow /* 2秒内完成动画 */
  animate__slower	/* 3秒内完成动画 */
  animate__fast	/* 800毫秒内完成动画 */
  animate__faster	/* 500毫秒内完成动画 */
  

示例：

<!-- 
使用animate.css
动画名：bounce
速度：快
重复：无限次
延迟：1秒
-->
<h1
    class="
           animate__animated
           animate__bounce
           animate_fast
           animate__infinite
           animate__delay-1s
           "
>
    Hello Animate
</h1>