性能强悍的CSS动画库--Animate.css
·
前言
互联网圈子里有造“轮子”的说法，能用现成的就不要自己去捣鼓了，既省时又省力！今天介绍的就是一款性能强悍的CSS动画库（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次动画效
其中，animate__bounce为跳动效果；animate__delay-[x]s：延时x秒后使用动画，项目提供了4种延时模式从2s到5s,默认情况是延时1s，我们也可以修改默认值。animate__repeat-[x]：重复显示动画的次数，默认有1,2,3和无穷次animate__infinite,同样的我们也可以修改默认重复次数。
2.其他功能：
animate__slow 持续2s
animate__slower 持续3s
animate__fast 持续800ms
animate__faster 持续500ms
3.自定义属性
上面介绍的是基本功能，但在实际应用中，我们可能要面对更复杂的场景。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; /* 设置持续时间 */
}
分享最新的 NVIDIA AI Software 资源以及活动/会议信息，精选收录AI相关技术内容，欢迎大家加入社区并参与讨论。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)