Animate.css的使用

一、安装

npm install animate.css --save

二、引入

import 'animate.css';

三、使用

     <h1class="animate__animated animate__bounce"@mouseenter="mouseenter"@mouseleave="mouseleave">An animated element</h1>//在js中的方法
function mouseenter(e) {e.target.className = "animate__animated animate__bounce";
}
function mouseleave(e) {e.target.className = "";
}//可以自行调节动画速度
/* This only changes this particular animation duration */
// 仅仅修改此动画
.animate__animated.animate__bounce {--animate-duration: 2s;
}/* This changes all the animations globally */
// 全局修改动画
:root {--animate-duration: 800ms;--animate-delay: 0.9s;
}

四、效果展示