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

相关推荐
liangshanbo12154 分钟前
React Hooks 为什么不能在条件分支/循环中调用?
前端·react.js·前端框架
豆角焖肉11 分钟前
Layui+Layer 弹出层实现 CRUD:AJAX 无刷新新增修改删除后台实战
前端·ajax·layui
sunphp开发者13 分钟前
制作手绘地图瓦片切图
前端·uni-app
尤水就下20 分钟前
聊聊 Prompt 是怎么一路进化到 Harness 的
前端·人工智能·ai编程
李溪白21 分钟前
深入 JavaScript 作用域:从变量提升到执行上下文的底层逻辑
前端
想风24 分钟前
Claude Code 实用技巧工作坊 —— Boris Cherny
前端·后端·github
梦想blog26 分钟前
Claude Code + Chrome MCP:让浏览器自动化测试更简单
前端·chrome·自动化·mcp
YHHLAI27 分钟前
React `useState` 深入浅出
前端·javascript·react.js
夜猫子小强30 分钟前
手搓一个「本地邮件摘要」工具:零依赖、数据不出电脑
前端
PBitW31 分钟前
Element plus 自定义列顺序 —— 求指点
前端·element