{{#markdown }}
### Overview
To get fade out effect just set:
```
animateOut: 'fadeOut'
```
> `fadeOut` value is the only built-in CSS animate style. However there are tons of additional CSS animations that you can use in Owl. Simply download [animate.css](https://daneden.github.io/animate.css/) library and you are ready to extend Owl with new fancy transitions.
### Important
Animate functions work only with one item and only in browsers that support perspective property.
### How to use additional animation from `animate.css` library
1. [Download animate.css](https://daneden.github.io/animate.css/)
2. Include animate.css into header.
3. Set `animateOut` and `animateIn` options with the style names you picked.
```
$('.custom1').owlCarousel({
animateOut: 'slideOutDown',
animateIn: 'flipInX',
items:1,
margin:30,
stagePadding:30,
smartSpeed:450
});
```
Example with slideOutDown and flipInX
{{/markdown }}
1
2
3
4
5
6
7
8
9
10
11
12
{{#markdown }}
### How does it work?
Before animation starts three classes are added to each item:
* .animated - added on both In and Out item - ive included this class from Animate.css into Owl core CSS file.
* .owl-animated-out - only on Out item - use it to change z-index
* .owl-animated-in - only on In item - use it to change z-index
* .classNameOut - only on Out item - this is your custom animation class from options.
* .classNameIn - only on In item - this is your custom animation class from options.
Part of owl.carousel.css:
```css
/* Feel free to change duration */
.animated {
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/* .owl-animated-out - only for current item */
/* This is very important class. Use z-index if you want move Out item above In item */
.owl-animated-out{
z-index: 1
}
/* .owl-animated-in - only for upcoming item
/* This is very important class. Use z-index if you want move In item above Out item */
.owl-animated-in{
z-index: 0
}
/* .fadeOut is style taken from Animation.css and this is how it looks in owl.carousel.css: */
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
```
{{/markdown }}