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

相关推荐
摘星编程6 分钟前
React Native for OpenHarmony 实战:RTL 从右到左布局详解
javascript·react native·react.js
Yvonne爱编码15 分钟前
前端工程化进阶:从搭建完整项目脚手架到性能优化【技术类】
前端·状态模式
cypking20 分钟前
二、前端规范化 遇到的问题及解决方案
前端
小范馆21 分钟前
STM32F03C8T6通过AT指令获取天气API
前端·javascript·stm32
zhengxianyi51534 分钟前
vue-cli build, vite build 生产部署刷新或弹窗404,页面空白修复方法
前端·javascript·vue.js·nginx·生产部署
Filotimo_36 分钟前
前端项目打包部署完整流程
前端
Savvy..38 分钟前
Day15 Talis 前端
前端
恋爱绝缘体11 小时前
Vue.js 组件 - 自定义事件【1】
前端·javascript·vue.js
梦6501 小时前
JavaScript ES5 + ES6+ 字符串 (String) 所有方法大全
前端·javascript·es6
梦6501 小时前
JavaScript (ES5)+ES6+jQuery 核心对象方法大全
javascript·es6·jquery