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

相关推荐
liangshanbo12153 分钟前
请求拦截器相关面试题
java·前端·javascript
ShawnLiaoking5 分钟前
ADS305 Big Data Lecuture4 Web Scraping
大数据·前端
liangshanbo12156 分钟前
React面试题:Hooks 为什么不能在分支和循环里面写?
前端·javascript·react.js
开开心心就好10 分钟前
视频压缩工具推荐,绿色版免安装双击即用
java·前端·人工智能·spring·智能手机·intellij-idea·excel
redfred11 分钟前
HyperFrames 部署教程:5.6 万 Star 开源「写 HTML 出视频」框架,Windows 从零上手(CLI 三条命令 + 7 个避坑)
ffmpeg·开源·自动化·html·音视频
西红柿炖牛腩35414 分钟前
GLB 转 OBJ/PLY 后体积没变?3D 模型不减面变小靠什么
前端·javascript·3d
欣欣之王来了20 分钟前
前端开发学习路线图:2026年Vue方向最新版
前端·学习·架构·项目·vue3教程
专业程序开发源22 分钟前
springboot古城景区管理系统88564-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·spring·php·课程设计
夏幻灵23 分钟前
前端八股:Vue2 与 Vue3 的核心区别:响应式、Composition API 与性能优化
前端