animate地址:https://animate.style
安装
使用 npm 安装:
$ npm install animate.css --save
或者使用 Yarn 安装(这只适用于适当的工具,如 Webpack、Parcel 等。如果您没有使用任何工具来打包或捆绑代码,您可以简单地使用下面的 CDN 方法):
$ yarn add animate.css
将其导入到您的文件中:
import 'animate.css';
或者使用 CDN 将其直接添加到您的网页:
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
使用方法:
操作步骤
1)引入文件
<link rel="stylesheet" href="animate.min.css">
2)在要动画的元素上添加animate__animated
类,并添加特定的动画类名
<div class="box animate__animated animate__wobble animate__delay-2s animate__faster animate__repeat-3">
</div>
给元素加上 class 后,刷新页面,就能看到动画效果了。
animate__animated 定义动画持续的时间及填充模式
animate__wobble 调用动画即使用@keyframes定义的动画名
animate__delay-2s 定义动画延迟的时间
animate__repeat 定义动画重复的次数
动画是无限播放的,可以添加类名 animate__infinite
animate__faster 定义动画的速度
demo:动画延迟的时间
animate__delay-2s 2s
animate__delay-3s 3s
animate__delay-4s 4s
animate__delay-5s 5s
demo:动画的快慢
animate__slow 2s
animate__slower 3s
animate__fast 800ms
animate__faster 500ms
demo:动画重复的次数
animate__repeat-1 1
animate__repeat-2 2
animate__repeat-3 3
animate__infinite infinite无限
兼容:
只兼容支持 CSS3 animate 属性的浏览器,他们分别是:IE10+、Firefox、Chrome、Opera、Safari。