不用导入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博客

相关推荐
用户1733598075372 分钟前
纯前端实现PDF合并、拆分、压缩:技术方案与踩坑记录
前端
工会代表3 分钟前
frps配置,以linux服务器以及windows客户端进行远程桌面内网穿透为例。
前端
用户713874229005 分钟前
Promise 与 Async Await 深度解析
前端
董董灿是个攻城狮7 分钟前
5分钟入门卷积算法
前端
用户58048170029289 分钟前
我用 MCP 给小程序开发做了个 AI 副驾驶,开源了
前端
雨季mo浅忆10 分钟前
记录利用Cursor快速实现Excel共享编辑
前端·excel
皮皮大人12 分钟前
Vue 3 响应式内核完全解密:reactive & effect 与 Vue 2 Watcher 史诗对决
前端·vue.js
LaughingZhu13 分钟前
Product Hunt 每日热榜 | 2026-05-31
前端·人工智能·经验分享·搜索引擎·chatgpt·html
陆枫Larry14 分钟前
CSS 中「深色 + 不透明度」vs 直接设浅色的区别
前端
Din15 分钟前
使用AI从 27 秒到秒开:一次 Web 首屏加载优化实战
前端