(十六)CSS常用动画库简介与JS动画
1:Animate.css
cool, fun, and cross-browser animations
2:Animate.css使用
引入Animate.css
本地引入
CDN引入 - 内容分发网络, 快速找到最近的节点提供资源下载
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
使用
<div class="animated bounce infinite"></div>
document.getElementById("main").classList.add('bounce')
document.getElementById("main").classList.remove('bounce')
#main {
animate-duration: 2s;
animate-delay: 1s;
animate-iteration-count: 2;
}
npm install animate.css
animate-config.json 文件
{
"scripts": {
"gulp": "./node_modules/gulp/bin/gulp.js",
},
}