不用导入animate库,也能实现animate的动画

1、基础公共代码

css 复制代码
.animated {
  animation-duration: .8s; // 持续时间
  animation-fill-mode: both;
}

2、 在animate官网(Animate.css | A cross-browser library of CSS animations.)找到自己需要的css效果,复制名字,例如:bounce

3、到github上找源码(https://github.com/animate-css/animate.css

4、把源码拷贝下来复制到自己项目代码的css中

注意:如果 不生效,很有可能你没有把公共的基础代码(animated)加进去

参看文献:Animate.css动画库,简单的使用,以及源码剖析_animate动画代码_Unknowncheats的博客-CSDN博客

相关推荐
水煮白菜王5 分钟前
高德地图"未获得商用授权"水印临时移除方案
前端·javascript
库拉AI小李6 分钟前
# 数据清洗与分析:Gemini 3.5 处理 Excel 数据的实操体验
前端·人工智能·后端
小小小小宇7 分钟前
React17 18 19 新增能力、解决问题、原理与使用详解
前端
chushiyunen7 分钟前
vue el-pagination实现分页
javascript·vue.js·elementui
by————组态8 分钟前
Ricon组态可视化编辑器 - 所见即所得的工业画布
前端·javascript·物联网·架构·编辑器·组态
Csvn12 分钟前
面试翻车现场:`Array(100).map(() => 1)` 为什么全为空?
前端
光影少年15 分钟前
react大列表优化:虚拟列表原理
前端·javascript·react.js
星栈20 分钟前
一套 Rust 代码跑三端:为什么我开始关注 Dioxus
前端·rust·前端框架
lichenyang45323 分钟前
从两个 demo 说起:WebSocket 和 SSE 到底差在哪?
前端
如烟花的信页30 分钟前
外贸*登录逆向分析
javascript·爬虫·python·js逆向