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

相关推荐
阿星AI工作室13 小时前
我做了个飞书转公众号排版器,6套高颜值主题想换就换
前端·人工智能
Lee川13 小时前
深入解析:从内存模型到作用域陷阱——JavaScript变量的前世今生
javascript·算法
_Eleven13 小时前
继TailWindCss和UnoCss后的CSS-in-JS vs Utility-First 深度对比
前端
GinoWi13 小时前
CSS属性 - 边距属性
前端
豆苗学前端13 小时前
彻底讲透医院移动端手持设备PDA离线同步架构:从"记账本"到"分布式共识",吊打面试官
前端·javascript·后端
AKclown13 小时前
Vibe coding(AI编程一网打尽)
前端·react.js
埋塘小王子13 小时前
React项目白屏兜底神器?ErrorBounary你了解吗?
前端
却尘14 小时前
一个 ERR_SSL_PROTOCOL_ERROR 让我们排查了三层问题,最后发现根本不是 SSL 的锅
前端·后端·网络协议
用户830407130570114 小时前
如何处理axios请求中post请求的坑
前端
行走在顶尖14 小时前
vue3项目搭建基础
前端