阅读数:186 评论数:0

一、基本介绍

animate.css是一个十分强大的css3动画库，里面预设了很多常见的动画，省云了我们手动编写css过滤代码的工作。

https://github.com/daneden/animate.css

二、使用

1-安装

npm install animate.css --save

然后在main.js中将其引入即可。

import animate from 'animate.css'
Vue.use(animate)

2、基本用法

<h1 class="animate__animated animate__bounce">An animated element</h1>

class使用animate__前缀加animation name。

3、使用@keyframes

animate.css提供了一些动画class，但是你也可以直接使用keyframes，animate.css并不会影响原工程的代码。

4、css自定义属性（css变量）

从版本4开始，animate.css使用自定义属性（css变量）来定义动画的执行时长、延时和迭代。

/* 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;
}

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

三、工具class

1、延时工具class

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

默认是1到5秒，你也可以通过自定义--animate-delay属性来自定义时长。

/* All delay classes will take 2x longer to start */
:root {
  --animate-delay: 2s;
}

/* All delay classes will take half the time to start */
:root {
  --animate-delay: 0.5s;
}

2、slow slower fast faster工具class

用于控制动画的速度。

<div class="animate__animated animate__bounce animate__faster">Example</div>

animate__animated class默认速度是1s，当然也可以设置--animate-duration属性来定义速度。

/* All animations will take twice as long to finish */
:root {
  --animate-duration: 2s;
}

/* Only this element will take half the time to finish */
.my-element {
  --animate-duration: 0.5s;
}

3、repeating class

用于控制动画的重复次数.

<div class="animate__animated animate__bounce animate__repeat-2">Example</div>

也可以通过--animate-repeat属性来自定义次数。

/* The element will repeat the animation 2x
   It's better to set this property locally and not globally or
   you might end up with a messy situation */
.my-element {
  --animate-repeat: 2;
}

但自定义对animate__infinite是无效的。

四、animation class

1、吸引注意力效果

（1）bounce  英文解释“跳动”

（2）flash 闪烁

（3）pulse 呼吸灯的效果（变大再变正常）

（4）rubberBand 原意“橡皮筋”，横向拉伸的效果

（5）shakeX 水平抖动

（6）shakeY 上下抖动

（7）headShake 与shakeX类似，但是幅度小

（8）swing 原意“摆动”，效果有点像秋千

（9）tada 变小再变正常，同时有一定抖动。

（10）wobble 原意“晃动”，swing是围着上面的点，wobble是围着下面的点。

（11）jello 有点拧毛巾的效果

（12）heartBeat 变大变小

2、进场效果

（1）backInDown 自上而下落

（2）backInLeft 自左向右

（3）backInRight

（4）backInUp

3、离场效果

（1）backOutDown 从下方消失

（2）backOutLeft

（3）backOutRight

（4）backOutUp

4、跳动入场效果

有一个“墩墩”的效果。

（1）bounceIn

（2）bounceInDown

（3）bounceInLeft

（4）bounceInRight

（5）bounceInUp

5、跳动离场效果

（1）bounceOut

（2）bounceOutDown

（3）bounceOutLeft

（4）bounceOutRight

（5）bounceOutUp

6、渐变式入场效果

（1）fadeIn

（2）fadeInDown

（3）fadeInDownBig

（4）fadeInLeft

（5）fadeInLeftBig

（6）fadeInRight

（7）fadeInRightBig

（8）fadeInUp

（9）fadeInUpBig

（10）fadeInTopLeft

（11）fadeInTopRight

（12）fadeInBottomLeft

（13）fadeInBottomRight

7、渐变式离场

（1）fadeOut

（2）fadeOutDown

（3）fadeOutDownBig

（4）fadeOutLeft

（5）fadeOutLeftBig

（6）fadeOutRight

（7）fadeOutRightBig

（8）fadeOutUp

（9）fadeOutUpBig

（10）fadeOutTopLeft

（11）fadeOutTopRight

（12）fadeOutBottomLeft

（13）fadeOutBottomRight

8、翻转效果

（1）flip

（2）flipInX

（3）flipInY

（4）flipOutX

（5）flipOutY

9、加速效果

（1）ligthSpeedInRight

（2）ligthSpeedInLeft

（3）lightSpeedOutRight

（4）lightSpeedOutLeft

10、旋转入场效果

（1）rotateIn

（2）rotateInDownLeft

（3）rotateInDownRight

（4）rotateInUpLeft

（5）rotateInUpRight

11、旋转离场效果

（1）rotateOut

（2）rotateOutDownLeft

（3）rotateOutDownRight

（4）rotateOutUpLeft

（5）rotateOutUpRight

12、特殊效果

（1）hinge 原来有两个钉子固定，突然变成一个，最后掉下来

（2）jackInTheBox 感觉和tada有点像

（3）rollIn

（4）rollOut

13、缩放入场效果

（1）zoomIn

（2）zoomInDown

（3）zoomInLeft

（4）zoomInRight

（5）zoomInUp

14、缩放离场效果

（1）zoomOut

（2）zoomOutDown

（3）zoomOutLeft

（4）zoomOutRight

（5）zoomOutUp

15、滑动入场效果

（1）slideInDown

（2）slideInLeft

（3）slideInRight

（4）slideInUp

16、滑动离场效果

（1）slideOutDown

（2）slideOutLeft

（3）slideOutRight

（4）slideOutUp