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

相关推荐
hzb666665 分钟前
xd_day32-day40
java·javascript·学习·安全·web安全·tomcat·php
东北甜妹9 分钟前
Python脚本
java·开发语言·前端
四千岁11 分钟前
WSL + OpenCode 最佳实践:环境一致、模型配置、GUI 远程使用
前端·javascript·后端
你挚爱的强哥12 分钟前
【sgCreateQrcode】自定义组件:模仿草料二维码做了一个简单的二维码制作组件
javascript·vue.js·elementui
进击的雷神14 分钟前
攻克JSON嵌套HTML的双重解析难题:基于多层数据提取的精准爬虫设计
爬虫·html·json·spiderflow
ssshooter21 分钟前
Tauri 2 Linux 上 asset://localhost 访问返回 403 避坑指南
前端·后端·架构
半世轮回半世寻25 分钟前
这 5 个 Elements 小技巧,真的能提高调试效率
前端·浏览器
kyriewen26 分钟前
for...of 的秘密:迭代器与可迭代对象,你也能创造“可循环”的东西
前端·javascript·面试
SuperEugene26 分钟前
前端 Git 协作规范实战:commit message + 分支管理 + 合并流程,告别冲突与混乱|工程化与协作规范篇
前端·javascript·vue.js·git·前端框架
泯仲27 分钟前
Zustand 状态管理实战详解:轻量高效的React状态方案
前端·javascript·react.js