不用导入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 分钟前
前端开发桌面端都有哪些框架?
前端·react.js·electron
Cecilialana12 分钟前
同域名、同项目、仅 hash 变化,window.location.href 不跳转
前端·javascript
Hello--_--World18 分钟前
DOM事件流与事件委托、判断数据类型、深浅拷贝、对象遍历方式
前端·javascript
落魄江湖行21 分钟前
进阶篇二 Nuxt4 渲染模式:SSR/SSG/CSR 怎么选
前端·vue.js·typescript·nuxt4
M宝可梦24 分钟前
ReAct 与 LLM Agentic 范式:从推理到行动的完整技术科普
前端·react.js·前端框架
x-cmd27 分钟前
[260416] 谷歌 Chrome 推出 Skills 功能!帮你保存、复用提示词
前端·chrome·ai·自动化·agent·x-cmd·skill
色空大师28 分钟前
【Linux-安装nginx】
linux·运维·前端·nginx·部署
董董灿是个攻城狮31 分钟前
封了几百万个账号的 Claude, 路走窄了
前端
Ruihong1 小时前
你的 Vue 3 TS 类型声明,VuReact 会处理成什么样的 React?
vue.js·react.js·面试
heytoo1 小时前
同一个模型,为什么结果差10倍?差的不是模型
前端·agent