位置: IT常识 - 正文
经典动画库 animate.css 的应用(经典动画动漫)
发布时间：2024-01-17推荐整理分享经典动画库 animate.css 的应用(经典动画动漫)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:经典动画排行榜(上),经典动画 下载,搜索经典动画,经典动画排行榜(上),经典动画播放,经典动画播放,经典动画 下载,搜索经典动画,内容如对您有帮助，希望把文章链接给更多的朋友！
animate.css：：Animate.css 就像嗑水那么简单的CSS动画。
官网：Redirecting to Animate.css
Animate.css是一个纯CSS动画库，其核心技术使用了 CSS3 里的 @keyframes 和 animation。
不兼容IE10以下的 IE 浏览器。其它各大浏览器只要不是太旧的版本都能兼容。现在微软官方已经抛弃了 IE 浏览器，目前主流浏览器都已经支持 Animate.css，所以说兼容性还是蛮强的。
官方给出了70多种动画特效，还在持续增加中。这些动画其实大多数都不是很难，就是不愿意去写。所以这个 CSS 库真的很适合懒人（所有人）。
获取 animate.css：GitHub - animate-css/animate.css: 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
docs ：说明文档，全英文。该文档是使用说明，需要在服务器下，才能运行有效。HBuilder 或者 Webstorm 开发模拟服务器皆可以。
animate.css：动画样式文件，非压缩版
animate.min.css：动画样式文件，压缩版。
animate.compat.css：动画样式文件，高压缩版。
二、基础用法step1. 引入 animate.css（1）一般应用在 HTML 页面中，引入 animate.css 即可。
<!-- 引入 --><link rel="stylesheet" href="css/animate.css/animate.min.css"> （2）CDN也可以使用CDN 上的文件，如：
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">（3）方式三：SCSS把 animate.min.css 拷贝到自己的 scss 目录，修改名字为 _animate.min.scss。
在主 scss 文件中，利用 @import 导入即可。如：
app.scss
@charset "utf-8";@import "public"; // 公用样式@import "animate.min"; // _animate.min.scss@import "style"; // 自己的样式文件step2. 完成标签静态样式页面动画编写的原则：先静而后动。
先完成静态的样式，再考虑动画。
<div class="box"></div>.box{ width: 200px; height: 200px; background: #f30; margin-left: auto; margin-right: auto; margin-top: 100px;}step3. 添加动画（1）给标签添加基础类 animate__animated老版本（v3及以下）的 animate.css，添加的基础类是 animated。
新版本（v4 及以上），通通添加了前缀 animate__。
<div class="box animate__animated"></div>（2）添加指定的动画类<div class="box animate__animated animate__bounce"></div>动画名称在官网上可以查看：
但是，类名前面不要忘了添加 animate__。
（3）设置动画延迟<div class="box animate__animated animate__bounce animate__delay-2s"></div>
animate.css 提供了从 1s 到 5s 的延迟类。
animate__delay-1s
animate__delay-2s
animate__delay-3s
animate__delay-4s
animate__delay-5s
可以自定义类，利用 animation-delay 属性去修改动画延迟时间。
<div class="box animate__animated animate__backInUp myAniDelay500ms"></div>.myAniDelay500ms{ animation-delay: 500ms;}4）控制动画持续时间 <div class="animate__animated animate__bounce animate__faster"> </div>animate.css 提供的 animate__animated 类，默认的动画时间是 1s，可以调整动画时间。
animate__slow 2s
animate__slower 3s
animate__fast 800ms
animate__faster 500ms
可以自定义类，利用 animation-duration 属性去修改动画持续时间。
<div class="box animate__animated animate__backInUp myAniDelay500ms"></div>.myAniDuration500ms{ animation-duration: 500ms;}（5）控制动画次数<div class="animate__animated animate__bounce animate__repeat-2"></div>animate.css 默认动画执行次数为 1。它提供了动画次数的类：
animate__repeat-1 1
animate__repeat-2 2
animate__repeat-3 3
animate__infinite infinite，无限次数。
可以自定义类，利用 animation-iteration-count 属性去修改动画延迟时间。
<div class="box animate__animated animate__backInUp myAniTimes10"></div>.myAniTimes10{ animation-iteration-count: 10;} 三、使用JavaScript控制动画基础应用，给标签增加 animate.css 类：
const element = document.querySelector('.my-element'); element.classList.add('animate__animated', 'animate__bounceOutLeft');可以监听动画事件：
const element = document.querySelector('.my-element');element.classList.add('animate__animated', 'animate__bounceOutLeft');element.addEventListener('animationend', () => { // do something});CSS 动画播放时，会发生以下三个 JS 事件：
animationstart - CSS 动画开始后触发
animationiteration - CSS 动画重复播放时触发
animationend - CSS 动画完成后触发。这个事件用的较多。
在这三个事件函数中，均可以使用 event.animationName 属性，获取是在执行哪个动画。
可以修改动画属性
const element = document.querySelector('.my-element');element.style.setProperty("animation-iteration-count", 1); 可以结合 Promise 自动给标签添加动画和结束动画后进行操作。const animateCSS = (element, animation, prefix = 'animate__') =>// We create a Promise and return itnew Promise((resolve, reject) => { const animationName = `${prefix}${animation}`; const node = document.querySelector(element); node.classList.add(`${prefix}animated`, animationName); // When the animation ends, we clean the classes and resolve the Promise function handleAnimationEnd(event) { event.stopPropagation(); node.classList.remove(`${prefix}animated`, animationName); resolve('Animation ended'); } node.addEventListener('animationend', handleAnimationEnd, {once: true});});像这样来使用它：
animateCSS('.my-element', 'bounce');// oranimateCSS('.my-element', 'bounce').then((message) => { // Do something after the animation});上一篇：大学生web前端期末大作业实例代码 (1500套,建议收藏) HTML+CSS+JS(大学生web前端期刊有哪些)
下一篇：vue中的proxy代理的使用（解决跨域问题）(vue中proxy代理?)
