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

相关推荐
sheeta19985 分钟前
Vue 前端基础笔记
前端·vue.js·笔记
小小小小宇5 分钟前
GitLab + GitLab Runner + Qiankun 微前端 + Nginx + Node 中间件 前端开发机从零搭建 CI/CD 全流程
前端
前端那点事10 分钟前
别再写垃圾组件!Vue3 如何设计「真正可复用」的高质量通用组件
前端·vue.js
卷帘依旧13 分钟前
JavaScript 中的 Symbol
前端·javascript
老王以为17 分钟前
Claude Code 从 GUI 到 TUI:开发者界面的范式回归
前端·人工智能·全栈
JYeontu18 分钟前
正方体翻滚Loading 2.0
前端·javascript·css
llq_35019 分钟前
React 组件处理 Props
前端
夫子39620 分钟前
多人协同后内容丢失?一文搞懂ONLYOFFICE document.key的正确用法
前端
张元清30 分钟前
React 与用户偏好:尊重用户已经在 OS 里设过的那些选项
前端·javascript·面试
RPGMZ31 分钟前
RPGMZ 游戏场景全局提示框 带三秒隐藏插件
前端·javascript·游戏·rpgmz