安装使用Animate动画库【Animate.css下载安装教程】原创

更多靠谱软件破解教程,戳这里!!(破解目录汇总)

哈喽,大家好,我是程小南,导航搬砖工一名,致力于为大家淘出更多有趣好使的生产力工具!

互联网圈子里有造“轮子”的说法,能用现成的就不要自己去捣鼓了,既省时又省力!每一位前端程序员在做动画的时候,是不是都希望自己的代码能像PPT里的动画那样,样式丰富又酷炫,但同时代码量又不要那么大,最好能有“轮子”可用?毕竟加班是谁都不愿意的吗!

那么,GitHub上的开源项目Animate.css,相信就是各位要找的“轮子”。

项目介绍

该项目目前在GitHub上有75.7k Star,可见其受欢迎程度。Animate.css支持目前所有主流浏览器和操作系统,能实现弹跳、淡入淡出、抖动、闪现等功能,而且所需代码量很少,大多数动画效果只需要简单的两行代码就能完成。

安装方法

方法一:使用yarn安装

$ yarn add animate.css

然后在文件中导入:

import 'animate.css'

这个方法需要提前安装Yarn

方法二:使用npm安装

$ npm install animate.css --save

Node.js中就带有npm,一般不需要单独安装npm。

方法三:直接添加网页

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

功能展示

1.基本功能

<h1 class="animate__animated animate__bounce animate__delay-2s animate__repeat-2">延时2s后,重复跳动2次动画效果</h1>

其中,animate__bounce为跳动效果,该项目提供了丰富的动画效果,我们可以通过观看效果,复制对应的类名即可!

animate__delay-[x]s:延时x秒后使用动画,项目提供了4种延时模式从2s到5s,默认情况是延时1s,我们也可以修改默认值,这个后面再讲。

animate__repeat-[x]:重复显示动画的次数,默认有1,2,3和无穷次animate__infinite,同样的我们也可以修改默认重复次数。

其他功能:

     animate__slow   持续2s
     animate__slower 持续3s
     animate__fast   持续800ms
     animate__faster 持续500ms

2.自定义属性

上面介绍的是基本功能,但在实际应用中,我们可能要面对更复杂的场景。Animate.css 使用 CSS 来定义动画的持续时间、延迟等,非常灵活和可定制,只需在本地或全局设置一个新值。

/* 本地变量设置*/
.animate__animated.animate__bounce {
  --animate-delay:1s;  /* 设置延时时间 */
  --animate-repeat: 2; /* 设置重复次数 */
  --animate-duration: 2s; /* 设置持续时间 */
}

/* 全局变量设置 */
:root {
  --animate-delay: 0.9s;     /* 设置延时时间 */
  --animate-repeat: 2;       /* 设置重复次数 */
  --animate-duration: 800ms; /* 设置持续时间 */
}

小白学堂 » 安装使用Animate动画库【Animate.css下载安装教程】原创

就聊挣钱,一个带着你做副业的社群。

立即查看 了解详情