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

相关推荐
Moment7 分钟前
2026年,为什么NestJS + Monorepo越来越流行了 ❓❓❓
前端·后端·面试
前端那点事9 分钟前
Vite4.x+打包优化实战指南(无冗余):从体积到速度,一文吃透所有技巧
前端·vue.js
Struggle_zy9 分钟前
Vue3 动态路由踩坑记
前端
SurgeJS13 分钟前
Vue Rex: 一个更简单的 Vue 3 请求库
前端
费曼学习法15 分钟前
Vue 响应式系统源码级剖析:从 Object.defineProperty 到 Proxy
javascript·vue.js
前端那点事16 分钟前
Vue十万条数据渲染无卡顿!3种工业级方案(附可复制代码+避坑指南)
前端·vue.js
神奇小汤圆31 分钟前
快手一面:为什么要求用Static来修饰ThreadLocal变量?
javascript
tenggouwa31 分钟前
16GB Mac 同时开 3 个 Cursor 拯救我的mac
前端·后端
用户66885998476633 分钟前
第一个Vue3.0程序
vue.js
天天打码36 分钟前
从 Rolldown 到 Oxc:前端工具链正在全面 Rust 化
开发语言·前端·rust