# Animating Custom Directives

> The $animate service provides animation detection support while performing DOM operations (enter, leave and move) as well as during addClass and removeClass operations.

## Animation with `$animate` service

```javascript
var promise = $animate.leave($element);
promise.then(function() {
    // Execute after animation completes
});
```

## Javascript Animation

```markup
<div class="list-item">Animate Me</div>
```

```javascript
angular.module('app')
    .animation('.list-item', function() {
        return {
            enter : function(element, done) {
                // Animation code here
                done();
            }
        };
});
```

## Animation Using 3rd Party Party library - `animate.css`

[https://daneden.github.io/animate.css/](https://daneden.github.io/animate.css/)

```markup
<span id="animationSandbox" class="animateMe">
    <h1 class="site__title mega">Animate.css</h1>
</span>
```

```css
.animationSandbox.ng-leave-active{
    animation: bounceOut; // from animate.css
}
```
