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

相关推荐
Irene19912 分钟前
JavaScript 中 this 指向总结和箭头函数的作用域说明(附:call / apply / bind 对比总结)
javascript·this·箭头函数
2501_9219308316 分钟前
ReactNative项目OpenHarmony三方库集成实战:react-native-appearance(更推荐自带的Appearance)
javascript·react native·react.js
还是大剑师兰特18 分钟前
Vue3 中 computed(计算属性)完整使用指南
前端·javascript·vue.js
井川不擦34 分钟前
前端安全通信方案:RSA + AES 混合加密
前端
孜孜不倦不忘初心36 分钟前
Ant Design Vue 表格组件空数据统一处理 踩坑
前端·vue.js·ant design
AD_wjk37 分钟前
Android13系统集成方案
前端
Joyee69138 分钟前
RN 的新通信模型 JSI
前端·react native
somebody38 分钟前
零经验学 react 的第6天 - 循环渲染和条件渲染
前端
青晚舟40 分钟前
AI 时代前端还要学 Docker & K8s 吗?我用一次真实部署经历说清楚
前端·github
墨鱼笔记42 分钟前
不使用微前端:如何实现主应用和子模块动态管理与通信实现
前端