7.1 万 Star！超实用，60 多种动画效果的 CSS 库
简介
animate.css 是实用一个有趣的，跨浏览器的多种动画的 css3 动画库，兼容性好，效果使用方便。实用它预设了抖动、多种动画的闪烁、效果弹跳、实用翻转、多种动画的旋转、效果淡入淡出等多达 60 多种动画效果，实用几乎包含了所有常见的多种动画的站群服务器动画效果。
animate.css 基于 CSS3，效果只兼容支持 CSS3 animate 属性的实用浏览器，IE10+、多种动画的Firefox、效果Chrome、Opera、Safari。
项目地址是：
https:// github.com/animate-css/ animate.css
安装
使用 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> 自定义属性。使用自定义属性来定义动画持续时间、b2b供应网延迟，这使得它非常灵活，当需要更改动画持续时间的时间，只需要为全局或本地设置一个新值。 /* 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 Its better to set this property locally and not globally or you might end up with a messy situation */ .my-element { --animate-repeat: 2; }本文地址：http://www.bzve.cn/html/6d63399360.html
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。