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

相关推荐
2501_9444241221 小时前
Flutter for OpenHarmony游戏集合App实战之连连看路径连线
android·开发语言·前端·javascript·flutter·游戏·php
search71 天前
前端设计:CRG 3--CDC error
前端
治金的blog1 天前
vben-admin和vite,ant-design-vue的结合的联系
前端·vscode
利刃大大1 天前
【Vue】Vue2 和 Vue3 的区别
前端·javascript·vue.js
Lhuu(重开版1 天前
JS:正则表达式和作用域
开发语言·javascript·正则表达式
荔枝一杯酸牛奶1 天前
HTML 表单与表格布局实战:两个经典作业案例详解
前端·html
Charlie_lll1 天前
学习Three.js–纹理贴图(Texture)
前端·three.js
yuguo.im1 天前
我开源了一个 GrapesJS 插件
前端·javascript·开源·grapesjs
安且惜1 天前
带弹窗的页面--以表格形式展示
前端·javascript·vue.js
米奇妙妙wuu1 天前
css实现文字和边框同样的渐变色效果
css·html·css3