71,000颗星星！超实用的CSS库，超过60种动画效果
时间：2023-03-14 12:25:12
科技观察
介绍animate.css是一个有趣的、跨浏览器的CSS3动画库，兼容性好，使用方便。预设了摇动、闪烁、弹跳、翻转、旋转、淡入淡出等60多种动画效果，几乎囊括了所有常见的动画效果。animate.css基于CSS3，只兼容支持CSS3动画属性的浏览器，IE10+，Firefox，Chrome，Opera，Safari。项目地址为：https://github.com/animate-css/animate.cssInstallusingnpmInstall:$npminstallanimate.css--saveInstallusingyarn:$yarnaddanimate.css使用CDN直接导入：
简单和基本的用法。安装好animate.css后，为其添加如下属性即可完成动画效果的制作。
Animatedelement自定义属性。使用自定义属性来定义动画时长、延迟，这使得它非常灵活，当你需要改变动画时长的时间时，你只需要在全局或局部设置一个新的值。/*Thisonlychangesthisparticularanimationduration*/.animate__animated.animate__bounce{--animate-duration:2s;}/*Thischangesalltheanimationsglobally*/:root{--animate-duration:800ms;--animate-delay:0.9s;}所有限时属性可以动态改变，可以通过JS脚本动态修改。//Allanimations将花费两倍的时间完成document.documentElement.style.setProperty('--animate-duration','2s');//Allanimations将花费一半的时间完成document.documentElement.style.setProperty('--动画持续时间','.5s');延迟效果：延迟效果可以直接添加到元素的class属性中：Example //animate.css提供了这些延迟属性：类默认延迟时间animate__delay-2s2sanimate__delay-3s3sanimate__delay-4s4sanimate__delay-5s5s//也可以通过--animate-delay属性自定义:/*Alldelayclasseswilltake2xlongertostart*/:root{--animate-delay:2s;}/*Alldelayclasseswilltakehalftimetostart*/:root{--animate-delay:0.5s;}动画速度：可以通过添加这些类来控制动画的速度：
Example //速度类包括这些：类默认速度animate__slow2sanimate__slower3sanimate__fast800msanimate__faster500ms//全局或局部可以通过--animate-duration属性自定义动画时间：/*Allanimationswilltaketwiceaslongtofinish*/:root{--animate-duration:2s;}/*Onlythiselementwilltakehalfthetimetofinish*/.my-element{--animate-duration:0.5s;}循环效果：可以添加这些类来控制动画循环次数：
