CSS animations

Some animations from Animate.css 3 (opens new window) are included to to the bundle, you can use it adding respective CSS classes, eg.:

<p class="animated fadeIn">
  Animated!
</p>
<p class="animated slow fadeInDown">
  Slowly animated!
</p>

Base class name is .animated, you can also use modifiers .faster, .fast, .slow and .slower, and finally the respective animation class name.

Check provided animateCss util to programatically use animations with JS.

Animations demo

Check default available animations classes and demo below:

bounce flash pulse shake wobble fadeIn fadeInDown fadeInLeft fadeInRight fadeInUp fadeOut fadeOutDown fadeOutLeft fadeOutRight fadeOutUp slideInDown slideInLeft slideInRight slideInUp slideOutDown slideOutLeft slideOutRight slideOutUp jackInTheBox zoomIn zoomOut

Vue transition example

<transition
  enter-active-class="animated fadeIn"
  leave-active-class="animated fadeOut fast"
>
  <p v-if="isVisible">
    Animate.css works like a charm with Vue.js
  </p>
</transition>

Edit duration

You can change base duration for all animations by setting $animate-duration SCSS variable:

$animate-duration: .5s;