# Customization

Animations enable you to customize their behavior by configuring the [`Animation`](https://www.telerik.com/kendo-vue-ui-develop/components/animation/api/animationprops) component.

To update the Animation effect, use the [`transition-name`](https://www.telerik.com/kendo-vue-ui-develop/components/animation/api/animationprops#transitionname) property. The property defines the class name that is added to the enter or exit elements.

## Entering Animations

To configure the entering animation, define the CSS classes by using the following syntax:

```scss
  .{transitionName}-enter {
    /* The class that will be added on initial render of the element */
  }

  .{transitionName}-enter-active {
    /* The class that will be added after one time-frame(~16ms) to initiate the transition */
  }
```

The following example demonstrates how to create a custom entering animation.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/animation/animations/entering/source.txt)

## Exiting Animations

To configure the exiting animation, define the CSS classes by using the following syntax:

```scss
  .{transitionName}-exit {
    /* The class that will be added on initial render of the element */
  }

  .{transitionName}-exit-active {
    /* The class that will be added after one time-frame(~16ms) to initiate the transition */
  }
```

The following example demonstrates how to customize an exiting Slide Animation.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/animation/animations/exiting/source.txt)

## Suggested Links

* [Basic Configuration](https://www.telerik.com/kendo-vue-ui-develop/components/animation/configuration)
* [API Reference of the Animation Component](https://www.telerik.com/kendo-vue-ui-develop/components/animation/api/animationprops)