你不知道的Animate.css

61 阅读1分钟

官网:animate.style/

CDN:cdn.bootcdn.net/ajax/libs/a…

Animate.css 库提供了大量的动画效果,开发者仅需使用它提供的类名即可

注意:animate.css中的动画对行盒无效,只对块盒有效

基本使用

类名格式为:

animate__animated animate__效果名

效果名分为以下几个大类,你可以从官网中找到对应的分类,每个分类下有多种效果名可供使用

分类含义
Attention seekers强调
Back entrances进入
Back exits退出
Bouncing entrances弹跳进入
Bouncing exits弹跳退出
Fading entrances淡入
Fading exits淡出
Flippers翻转
Lightspeed光速
Rotating entrances旋转进入
Rotating exits旋转退出
Specials特殊效果
Zooming entrances缩放进入
Zooming exits缩放退出
Sliding entrances滑动进入
Sliding exits滑动退出
  • 延时
/* 默认无延时 */
animate__delay-1s  /* 延时1秒 */
animate__delay-2s  /* 延时2秒 */
animate__delay-3s  /* 延时3秒 */
animate__delay-4s  /* 延时4秒 */
animate__delay-5s  /* 延时5秒 */
  • 重复次数
/* 默认重复1次 */
animate__repeat-2   /* 重复2次 */
animate__repeat-3   /* 重复3次 */
animate__infinite   /* 重复无限次 */
  • 速度
/* 默认1秒内完成动画 */
animate__slow /* 2秒内完成动画 */
animate__slower /* 3秒内完成动画 */
animate__fast   /* 800毫秒内完成动画 */
animate__faster /* 500毫秒内完成动画 */

示例:

<!-- 
  使用animate.css
动画名:bounce
速度:快
重复:无限次
延迟:1秒
-->
  <h1
class="
  animate__animated
animate__bounce
animate_fast
animate__infinite
animate__delay-1s
"
  >
  Hello Animate
  </h1>