# Types

The Animation components animate their content by using various animation effects.

The Animation package delivers the following types of animations:

* [Fade](https://www.telerik.com/kendo-vue-ui-develop/components/animation/types#fade)
* [Expand](https://www.telerik.com/kendo-vue-ui-develop/components/animation/types#expand)
* [Push](https://www.telerik.com/kendo-vue-ui-develop/components/animation/types#push)
* [Reveal](https://www.telerik.com/kendo-vue-ui-develop/components/animation/types#reveal)
* [Slide](https://www.telerik.com/kendo-vue-ui-develop/components/animation/types#slide)

## Fade

The Fade Animation animates newly added children by using a fade-in effect.

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

## Expand

The Expand Animation animates the `scaleY()` or `scaleX()` CSS property of the container element.

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

## Push

The Push Animation slides the new component by pushing the old one out.

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

## Reveal

The Reveal Animation animates the `height` or `width` CSS property of the container element.

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

## Slide

The Slide Animation slides a single piece of content in a predefined direction.

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

## Zoom

The Slide Animation slides a single piece of content in a predefined direction.

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

## Suggested Links

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