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

相关推荐
cc蒲公英6 分钟前
javascript有哪些内置对象
java·前端·javascript
zhangwenwu的前端小站21 分钟前
vue 对接 Dify 官方 SSE 流式响应
前端·javascript·vue.js
王林不想说话26 分钟前
受控/非受控组件分析
前端·react.js·typescript
_杨瀚博28 分钟前
VUE中使用AXIOS包装API代理
前端
张有志34 分钟前
基于 Body 滚动的虚拟滚动组件技术实现
前端·react.js
b***748840 分钟前
前端正在进入“超级融合时代”:从单一技术栈到体验、架构与智能的全维度进化
前端·架构
白杨SEO营销44 分钟前
白杨SEO:看“20步:从0-1做项目的笨办法”来学习如何选一个项目做及经验分享
前端·学习
叫我詹躲躲1 小时前
Vue 3 组件开发最佳实践:可复用组件设计模式
vue.js
AY呀1 小时前
# 🌟 JavaScript原型与原型链终极指南:从Function到Object的完整闭环解析 ,深入理解JavaScript原型系统核心
前端·javascript·面试
用户434662153131 小时前
无废话之 useState、useRef、useReducer 的使用场景与选择指南
前端