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

相关推荐
俺叫啥好嘞11 小时前
日志输出配置
java·服务器·前端
一 乐11 小时前
运动会|基于SpingBoot+vue的高校体育运动会管理系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·学习·springboot
7***n7511 小时前
JavaScript混合现实案例
开发语言·javascript·mr
X_hope11 小时前
巧妙浏览器事件监听API:addEventListener的第三个参数
前端·javascript
極光未晚11 小时前
Node.js的"老伙计":Express框架入门记
前端·node.js
1***Q78411 小时前
TypeScript类型兼容
前端·javascript·typescript
多啦C梦a11 小时前
React useTransition 全网最通俗深度讲解:为什么它能让页面“不卡”?
前端·javascript·react.js
inCBle11 小时前
vue3+ts 封装一个通用流程复用工具函数
前端·vue.js·设计
西维11 小时前
告别手动部署!Docker + Drone 前端自动化部署指南
前端·ci/cd·docker
实习生小黄11 小时前
WXT 框架下的 Window 对象获取
前端·浏览器