7.1 万 Star！超实用，60 多种动画效果的 CSS 库
Posted 开源前哨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了7.1 万 Star！超实用，60 多种动画效果的 CSS 库相关的知识，希望对你有一定的参考价值。
【导语】：animate.css 是一个有趣的，跨浏览器的CSS3 动画库。
简介
animate.css 是一个有趣的，跨浏览器的 css3 动画库，兼容性好，使用方便。它预设了抖动、闪烁、弹跳、翻转、旋转、淡入淡出等多达 60 多种动画效果，几乎包含了所有常见的动画效果。
animate.css 基于 CSS3，只兼容支持 CSS3 animate 属性的浏览器，IE10+、Firefox、Chrome、Opera、Safari。
项目地址是：
https://github.com/animate-cs...
安装
- 使用 npm 安装：
$ npm install animate.css --save- 使用 yarn 安装：
$ yarn add animate.css- 使用 CDN 直接引入：
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>简单使用
- 基本用法。安装 animate.css 后，将以下属性添加到中即可完成动画效果的创建。
<h1 class="animate__animated animate__bounce">An animated element</h1>- 自定义属性。使用自定义属性来定义动画持续时间、延迟，这使得它非常灵活，当需要更改动画持续时间的时间，只需要为全局或本地设置一个新值。
/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
--animate-duration: 2s;
}
/* This changes all the animations globally */
:root {
--animate-duration: 800ms;
--animate-delay: 0.9s;
}- 同时自定义属性还可以动态更改所有时间受限的属性，可以通过 JS 脚本动态修改。
// All animations will take twice the time to accomplish
document.documentElement.style.setProperty(\'--animate-duration\', \'2s\');
// All animations will take half the time to accomplish
document.documentElement.style.setProperty(\'--animate-duration\', \'.5s\');- 延迟效果：可以直接在元素的 class 属性上添加延迟效果：
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
// animate.css 提供了这些延迟属性：
class 默认延迟时间
animate__delay-2s 2s
animate__delay-3s 3s
animate__delay-4s 4s
animate__delay-5s 5s
// 也可以通过 --animate-delay 属性进行自定义：
/* All delay classes will take 2x longer to start */
:root {
--animate-delay: 2s;
}
/* All delay classes will take half the time to start */
:root {
--animate-delay: 0.5s;
}- 动画速度：可以通过添加这些 class 来控制动画的速度：
<div class="animate__animated animate__bounce animate__faster">Example</div>
// 速度的 class 包括这些：
class 默认速度
animate__slow 2s
animate__slower 3s
animate__fast 800ms
animate__faster 500ms
// 可以通过 --animate-duration 全局或本地属性自定义动画时间：
/* All animations will take twice as long to finish */
:root {
--animate-duration: 2s;
}
/* Only this element will take half the time to finish */
.my-element {
--animate-duration: 0.5s;
}- 循环效果：可以通过添加这些 class 来控制动画的循环次数：
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>
// 可供选择的 class 有：
class 循环次数
animate__repeat-1 1
animate__repeat-2 2
animate__repeat-3 3
animate__infinite 无限循环
// 类似的，也可以自定义循环次数：
/* The element will repeat the animation 2x
It\'s better to set this property locally and not globally or
you might end up with a messy situation */
.my-element {
--animate-repeat: 2;
}- 最后，来看看 animate.css 的一些效果：
视频请移步：https://mp.weixin.qq.com/s/X1...
开源前哨 日常分享热门、有趣和实用的开源项目。参与维护 10万+ Star 的开源技术资源库，包括：Python、Java、C/C++、Go、JS、CSS、Node.js、php、.NET 等。以上是关于7.1 万 Star！超实用，60 多种动画效果的 CSS 库的主要内容，如果未能解决你的问题，请参考以下文章