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

相关推荐
用户游民10 分钟前
Android 项目aab包上传谷歌平台需支持16KB页面
前端
SevgiliD14 分钟前
后台下载:获取响应头文件名
前端
Hejjon18 分钟前
Vue3 页面刷新时在 onMounted 里获取到的path 一直是 / 问题
前端
yuki_uix24 分钟前
CSS 里的"结界":BFC 与层叠上下文的渲染隔离逻辑
前端·面试
说实话起个名字真难啊29 分钟前
2026数字中国创新大赛数字安全赛道writeup之web题目一
java·前端·安全
jerrywus1 小时前
Claude Code 真正的用法:skill / agent / hooks / worktree 一篇全搞定
前端·agent·claude
陈健平1 小时前
AI漫剧工具复刻实战:用 React Flow 搭一个前端的无限画布,复刻 TapNow / LiblibTV 的核心交互
前端·人工智能·react.js
研☆香1 小时前
聊一聊如何分析js中的数据结构
开发语言·javascript·数据结构
huangql5201 小时前
CSS布局(五):Flex——让布局更灵活
前端·css