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

相关推荐
Younglina几秒前
🏸 从零打造一个羽毛球球线追踪网站:纯前端实战指南
前端
C澒2 分钟前
微前端容器标准化:从碎片化到统一架构的渐进式改造
前端·架构
CyrusCJA7 分钟前
JavaScript原型与super关键字
前端·javascript·js
左耳咚19 分钟前
Claude Code 技术全景概览
前端·ai编程
2601_9534656132 分钟前
m3u8live.cn深度解析:一款专为开发者打造的 M3U8 调试工具
java·前端·django·音视频·开发工具
娇娇yyyyyy33 分钟前
QT编程(9): QTextEdit
前端·qt
zzb15801 小时前
RAG from Scratch-优化-routing
java·前端·网络·人工智能·后端·python·mybatis
codeshareman1 小时前
JSON.stringify 在 React Hooks 依赖项里的坑:一次复盘
javascript
进击的尘埃1 小时前
把 LLM 吐出来的组件扔进 `iframe` 跑:沙箱隔离这件事没你想的那么简单
javascript
ujainu1 小时前
Electron 极简时钟应用开发全解析:托盘驻留、精准北京时间与 HarmonyOS PC 适配实战
javascript·electron·harmonyos