当前位置：首页 > 系统运维

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>  自定义属性。使用自定义属性来定义动画持续时间、云服务器延迟，这使得它非常灵活，当需要更改动画持续时间的时间，只需要为全局或本地设置一个新值。 /* 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; } 

分享到：

相关推荐


最近发表
随机阅读
搜索
友情链接
滇ICP备2023006006号-16