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

相关推荐
Aliex_git几秒前
浏览器 API 兼容性解决方案
前端·笔记·学习
独泪了无痕2 分钟前
useStorage:本地数据持久化利器
前端·vue.js
程序员林北北15 分钟前
【前端进阶之旅】JavaScript 一些常用的简写技巧
开发语言·前端·javascript
全栈前端老曹15 分钟前
【Redis】Redis 持久化机制 RDB 与 AOF
前端·javascript·数据库·redis·缓存·node.js·全栈
NEXT0620 分钟前
受控与非受控组件
前端·javascript·react.js
NEXT0638 分钟前
防抖(Debounce)与节流(Throttle)解析
前端·javascript·面试
mqiqe1 小时前
pnpm 和npm 有什么区别?
前端·npm·node.js
呆子小木心2 小时前
Vue2或Vue3项目引用百度地图
javascript·vue.js·typescript·前端框架·html5
Swift社区2 小时前
React 项目生产环境构建与静态资源优化
前端·react.js·前端框架
A小码哥3 小时前
基于 Trae + 国产 GLM-4.7模型的任务驱动式软件开发实践
前端