安装使用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; /* 设置持续时间 */
}