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

相关推荐
打瞌睡的朱尤3 分钟前
CSS复习
前端·css
程序员 沐阳5 分钟前
异步编程深潜:事件循环、Promise 与 async/await 的底层真相
javascript
irpywp8 分钟前
Boneyard:基于组件映射的骨架屏方案
前端·ui·github
276695829210 分钟前
zp_stoken 算法风控分析
java·前端·javascript·python·web逆向·boss直聘·zp_stoken
叫我一声阿雷吧12 分钟前
JS 入门通关手册(38):防抖与节流 原理 + 手写 + 实战场景(面试必考)
javascript·性能优化·前端面试·防抖·节流·js手写题
妮妮喔妮20 分钟前
组件的封装
开发语言·前端·javascript
cypking28 分钟前
前端瓦片渲染解决方案(解决大量数据渲染卡顿问题)
前端
李子焱28 分钟前
第三节:开发环境搭建与Trae IDE深度配置
前端·ide·python·node.js·trae ide
王家视频教程图书馆1 小时前
electron 环境搭建
前端·javascript·electron
速易达网络1 小时前
Vue 3 的无人机送餐飞控数字大屏
前端