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

相关推荐
老前端的功夫1 小时前
Vue 3 性能深度解析:从架构革新到运行时的全面优化
javascript·vue.js·架构
天天扭码2 小时前
如何实现流式输出?一篇文章手把手教你!
前端·aigc·ai编程
前端 贾公子2 小时前
vue移动端适配方案 === postcss-px-to-viewport
前端·javascript·html
GISer_Jing3 小时前
AI营销增长:4大核心能力+前端落地指南
前端·javascript·人工智能
明远湖之鱼3 小时前
一种基于 Service Worker 的渐进式渲染方案的基本原理
前端
前端小端长4 小时前
Vue 中 keep-alive 组件的原理与实践详解
前端·vue.js·spring
FeelTouch Labs4 小时前
Nginx核心架构设计
运维·前端·nginx
雪球工程师团队4 小时前
别再“苦力”写后台,Spec Coding “跑” 起来
前端·ai编程
m0_471199634 小时前
【场景】前端怎么解决离线收银、数据同步异常等场景问题
前端·javascript