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

相关推荐
pas1364 分钟前
37-mini-vue 解析插值
前端·javascript·vue.js
十里-1 小时前
vue.js 2前端开发的项目通过electron打包成exe
前端·vue.js·electron
雨季6662 小时前
构建 OpenHarmony 简易文字行数统计器:用字符串分割实现纯文本结构感知
开发语言·前端·javascript·flutter·ui·dart
雨季6662 小时前
Flutter 三端应用实战:OpenHarmony 简易倒序文本查看器开发指南
开发语言·javascript·flutter·ui
小北方城市网2 小时前
Redis 分布式锁高可用实现:从原理到生产级落地
java·前端·javascript·spring boot·redis·分布式·wpf
console.log('npc')2 小时前
vue2 使用高德接口查询天气
前端·vue.js
2401_892000522 小时前
Flutter for OpenHarmony 猫咪管家App实战 - 添加支出实现
前端·javascript·flutter
天马37982 小时前
Canvas 倾斜矩形绘制波浪效果
开发语言·前端·javascript
天天向上10243 小时前
vue3 实现el-table 部分行不让勾选
前端·javascript·vue.js
qx093 小时前
esm模块与commonjs模块相互调用的方法
开发语言·前端·javascript