​​animate.css​​是一个基于css3 animation动画库，库中预设了几乎所有日常开发中的需求

animate.css 的官网为：​​https://animate.style​​

官方好像访问不到(2022-11-09)

gitee镜像代码：​​https://gitee.com/mirrors/animate-css​​

安装库 ​​npm install animate.css​​

引入 import 'animate.css'

使用 直接在class添加对应类

​​注意​​​，在使用动画名称时还要讲基本类名称​​animate__animated​​，一起添加，才能起作用

结合Vue的transition动画组件使用，可参考这位大佬文章​​javascript:void(0)​​

这里提供了一些主要的类名中文注释

点击查看class类名

fade: {
  title: '淡入淡出',
  fadeIn: '淡入',
  fadeInDown: '向下淡入',
  fadeInDownBig: '向下快速淡入',
  fadeInLeft: '向右淡入',
  fadeInLeftBig: '向右快速淡入',
  fadeInRight: '向左淡入',
  fadeInRightBig: '向左快速淡入',
  fadeInUp: '向上淡入',
  fadeInUpBig: '向上快速淡入',
  fadeOut: '淡出',
  fadeOutDown: '向下淡出',
  fadeOutDownBig: '向下快速淡出',
  fadeOutLeft: '向左淡出',
  fadeOutLeftBig: '向左快速淡出',
  adeOutRight: '向右淡出',
  fadeOutRightBig: '向右快速淡出',
  fadeOutUp: '向上淡出',
  fadeOutUpBig: '向上快速淡出'
},
bounce: {
  title: '弹跳类',
  bounceIn: '弹跳进入',
  bounceInDown: '向下弹跳进入',
  bounceInLeft: '向右弹跳进入',
  bounceInRight: '向左弹跳进入',
  bounceInUp: '向上弹跳进入',
  bounceOut: '弹跳退出',
  bounceOutDown: '向下弹跳退出',
  bounceOutLeft: '向左弹跳退出',
  bounceOutRight: '向右弹跳退出',
  bounceOutUp: '向上弹跳退出'
},
zoom: {
  title: '缩放类',
  zoomIn: '放大进入',
  zoomInDown: '向下放大进入',
  zoomInLeft: '向右放大进入',
  zoomInRight: '向左放大进入',
  zoomInUp: '向上放大进入',
  zoomOut: '缩小退出',
  zoomOutDown: '向下缩小退出',
  zoomOutLeft: '向左缩小退出',
  zoomOutRight: '向右缩小退出',
  zoomOutUp: '向上缩小退出'
},
rotate: {
  title: '旋转类',
  rotateIn: '顺时针旋转进入',
  rotateInDownLeft: '从左往下旋入',
  rotateInDownRight: '从右往下旋入',
  rotateInUpLeft: '从左往上旋入',
  rotateInUpRight: '从右往上旋入',
  rotateOut: '顺时针旋转退出',
  rotateOutDownLeft: '向左下旋出',
  rotateOutDownRight: '向右下旋出',
  rotateOutUpLeft: '向左上旋出',
  rotateOutUpRight: '向右上旋出'
},
flip: {
  title: '翻转类',
  flipInX: '水平翻转进入',
  flipInY: '垂直翻转进入',
  flipOutX: '水平翻转退出',
  flipOutY: '垂直翻转退出'
},
strong: {
  title: '强调类',
  bounce: '弹跳',
  flash: '闪烁',
  pulse: '脉冲',
  rubberBand: '橡皮筋',
  shake: '左右弱晃动',
  swing: '上下摆动',
  tada: '缩放摆动',
  wobble: '左右强晃动',
  jello: '拉伸抖动'
}

简单使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
         <style type="text/css">
             /* 对某个动画名称设置一个周期的时间，缺点就是这个只能对单一某个动画进行设置 */
            .animate__pulse {
                  --animate-duration: 5s;
                  --animate-delay: 5.9s;
            }
            
            /* 将所有的动画设置动画时间*/
            :root {
              --animate-duration: 2000ms;                           
            }
            /*直接调用关键帧名称*/
            p{            
                animation-name:jello ;
                animation-duration: 2s;
                animation-delay: 1.5s;
            }
         </style>
    </head>
    <body>
        <h1 class="animate__animated animate__pulse">An animated 4.x element</h1>
        <h1 class="animate__animated animate__heartBeat">An animated 4.x element</h1>
        <h1 class="animate__animated animate__jello">An animated 4.x element</h1>
    </body>
</html>

Animate.css的简单使用_css

箴言：因为这些东西是非常简单的。不要抱怨自己学不会，那是因为你没有足够用心。