Animate.css的简单使用

2024-02-09 19:36:58

Animate.css的简单使用

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

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

一、安装方式

CDN 地址：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>

animate.css地址：链接：https://pan.baidu.com/s/1wxEWXJ7cBydb9afJkYoGLw 提取码：uphx

二、animate.css 4.x区别和使用方法

animate.css 4.x版本迎来了重大改变，不仅添加了更多动画效果，引用前缀也进行了改变。

在3.x版本时，基本类都是加animated ，在4.x版本加 animate__animated，就是要加 animate__ 前缀。注意区别版本

<h1 class="animate__animated animate__pulse">An animated 4.x element</h1>
<h1 class="animated pulse">An animated 3.x element</h1>

三、animate.css 4.x的基本使用方法

安装Animate.css之后，将该类animate__animated以及动画名称添加到元素中（不要忘记animate__前缀！）

动画名称就是Animate官网提供给我们的css类名,当我们鼠标移动到某个类名可以点击右边的直接复制类名称（此时案例复制的类名称为 animate__bounce）

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

右侧的英文比较多，这里提供了一些主要的类名中午注释

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>
        <p>hgtftgfgjfjnghf</p>
        <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的简单使用

相关文章