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

相关推荐
鱼锦0.03 小时前
在vue2中主页面怎么给子页面传递数据
前端·javascript·html
!win !6 小时前
前端跨标签页通信方案(下)
前端·javascript
f***45326 小时前
基于SpringBoot和PostGIS的各省与地级市空间距离分析
android·前端·后端
编码追梦人6 小时前
从 “手忙脚乱“ 到 “行云流水“:华为云 DevUI 与 MateChat 如何让前端开发飞起来
前端·华为云
用户47949283569157 小时前
TypeScript 简史:它是怎么拯救我的烂代码的
javascript·typescript
S***H2837 小时前
前端动画实现经验,性能优化与兼容性
前端
用户47949283569157 小时前
只有前端 Leader 才会告诉你:那些年踩过的模块加载失败的坑(二)
javascript
xw57 小时前
前端跨标签页通信方案(下)
前端·javascript
zzlyx998 小时前
IoTSharp前端VUE采用npm run build编译提示require() of ES Module 出错
前端·vue.js·npm
全栈技术负责人8 小时前
拒绝“无法复现”:前端全链路日志排查实战手册
前端·全链路·问题排查思路