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

相关推荐
西西学代码25 分钟前
Flutter---折线图(使用外部库)
前端·javascript·flutter
坚持学习前端日记26 分钟前
Android JS桥技术深度解析
android·开发语言·javascript
json{shen:"jing"}1 小时前
07_表单输入绑定
java·前端·javascript
yyt3630458411 小时前
K 线图高性能窗口化渲染
前端·javascript·css·vue.js·gitee·vue
XiaoYu20021 小时前
第5章 Nest.js精进-IOC控制反转
前端
LV技术派1 小时前
适合很多公司和团队的 AI Coding 落地范式(二)
前端·aigc·ai编程
IT_陈寒1 小时前
Redis性能翻倍的5个冷门技巧:从每秒10万到20万的实战优化之路
前端·人工智能·后端
ss2731 小时前
高版本node启动RuoYi-Vue若依前端ruoyi-ui
前端·javascript·vue.js
饼干,1 小时前
模拟试卷2
前端·javascript·easyui
南雨北斗2 小时前
js 严格模式
前端