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

相关推荐
eason_fan18 分钟前
前端避坑指南:一文吃透 npm 幽灵依赖(Phantom Dependency)
前端·前端工程化
前端小万19 分钟前
2026年3月面20个前端
前端
葡萄城技术团队38 分钟前
智慧表格(SpreadJS + AI):拥抱 Web 端对话式办公新时代
前端·人工智能
OpenTiny社区1 小时前
电商系统集成GenUI SDK实操指南
前端·开源·ai编程
A_nanda1 小时前
vue实现后端传输逐帧图像数据
前端·javascript·vue.js
YGY顾n凡1 小时前
我开源了一个项目:一句话创造一个AI世界!
前端·后端·aigc
qq_12084093711 小时前
Three.js 工程向:动画循环与时间步进稳定性实践
前端·javascript
旷世奇才李先生2 小时前
React18\+TypeScript实战: Hooks封装与企业级组件开发
前端·javascript·typescript
午安~婉2 小时前
Electron(续4)利用AI辅助完成配置功能
前端·javascript·electron·应用打包与发布
tERS ERTS2 小时前
头歌答案--爬虫实战
java·前端·爬虫