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

相关推荐
T___T1 分钟前
class 出现前,JS 是怎么继承的
前端·javascript·面试
b***74882 分钟前
前端技术的下一场革命:体验、架构与智能协作的深度重构
前端·重构·架构
2201_757830874 分钟前
JS的学习
前端·javascript·学习
鸡腿大王5 分钟前
震惊:v8引擎竟是如此操作代码(JS预编译)
前端·javascript
whisper5 分钟前
pnpm和npm对比,为什么现在更多项目使用pnpm运行项目
前端
梨子同志6 分钟前
Node.js 模块系统
前端
用户2965412759176 分钟前
JSAPIThree 加载 WMS、WMTS 和通用栅格图学习笔记:标准地图服务与切图规则
前端
白龙马云行技术团队8 分钟前
Antd Tree组件定制化性能提升实践
前端
大帅子9 分钟前
Mac 用户对于不同前端项目自动配置 node 版版本
前端·node.js
飞龙AI9 分钟前
为什么第三层div的内容溢出会触发第一层div的溢出
javascript