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

相关推荐
灵析表格5 小时前
灵析表格功能函数深度分析报告
前端·数据库·microsoft
breeze jiang5 小时前
React useRef + Web Worker:避免大计算阻塞页面的通信方案
前端·javascript·react.js
fthux5 小时前
MCP协议开发实战:从零搭建AI Agent工具链
前端·人工智能·ai·开源·github
zho_uzhou5 小时前
ubuntu服务端运行vue网页步骤
linux·服务器·vue.js·ubuntu
黄贵根11 小时前
JavaScript实现教培行业意向登记系统
开发语言·javascript·ecmascript
codeGoogle14 小时前
自研 IM 还是选择第三方 SDK?企业开发者应该如何权衡?
前端·后端·程序员
zzzzzz31015 小时前
从 react-bits 看动效组件化:别把视觉效果写成一次性页面代码
javascript·react.js·开源
用户9385156350715 小时前
React Context 与自定义 Hook 从底层到实践:「跨层级通信 + 副作用封装」全解析
前端·javascript·react.js
滴滴答答哒15 小时前
VUE3+element-plus MultiSelect 多选下拉组件
前端·javascript·vue.js