# 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
.slower, and finally the respective animation class name.
animateCss util to programatically use animations with JS.
# Animations demo
Check default available animations classes and demo below:
# 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: