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

相关推荐
Giant10015 小时前
深度玩转 Cursor Rules:让 AI 生成的代码 100% 符合团队规范
前端·面试
代码煮茶15 小时前
Vue3 组件通信实战 | 8 种组件通信方式全解析
前端·vue.js
kyriewen15 小时前
自定义事件:让代码之间也能“悄悄对话”
前端·javascript·面试
子兮曰15 小时前
别把它当成一次普通“源码泄露”:Claude Code 事件给 AI Agent 团队提了什么醒
前端·npm·claude
心之语歌15 小时前
Vue2 data + Vue3 ref/reactive 核心知识点总结
开发语言·前端·javascript
诸葛亮的芭蕉扇15 小时前
tooltip-position-solution
前端·vue.js·elementui
程序员小寒15 小时前
JavaScript设计模式(六):职责链模式实现与应用
java·javascript·设计模式
LXXgalaxy16 小时前
`摸鱼决策轮盘`【vue3+ts前端实战小项目】
前端
这是个栗子16 小时前
关于 TypeScript 的介绍
前端·javascript·typescript
亿元程序员16 小时前
亿元Cocos小游戏实战合集指南和答疑
前端