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

相关推荐
大漠_w3cpluscom1 分钟前
利用现代 CSS 实现区间选择
前端·css·html
吃素的老虎8 分钟前
从零构建 AI 网关(一):WebSocket 服务器实战
前端
酉鬼女又兒22 分钟前
HTML基础实例样式详解零基础快速入门Web开发(可备赛蓝桥杯Web应用开发赛道) 助力快速拿奖
前端·javascript·职场和发展·蓝桥杯·html·html5·web
Watermelo61725 分钟前
【前端实战】构建 Vue 全局错误处理体系,实现业务与错误的清晰解耦
前端·javascript·vue.js·信息可视化·性能优化·前端框架·设计规范
A923A27 分钟前
【Vue3大事件 | 项目笔记】第二天
前端·vue.js·笔记·前端框架·前端项目
万码社41 分钟前
小程序开发实战:我手写日历组件踩过的那些坑
前端
工藤新一¹1 小时前
《操作系统》第一章(1)
java·服务器·前端
进击的尘埃1 小时前
Vue 3 编译器宏的编译时魔法:defineModel、defineSlots 与 AST 转换的真相
javascript
用户9714171814271 小时前
Flex 和 Grid 详细使用指南:从入门到实战避坑
前端·css
不会敲代码11 小时前
使用 Mock.js 模拟 API 数据,实现前后端并行开发
前端·javascript