> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How can I add animations to my website?

**There are a few ways to animate elements in your projects so that they are more dynamic and interesting. Here are three ways to do it:**

|    |    |    |
| --- | --- | --- |
| [1. Animations tab](#2-animations-tab) | [2. External libraries](#2-use-external-libraries) | [3. Transition property](#2-use-the-transition-property) |

## Animations tab

The easiest way to animate your project is with our native Animations tab. To animate al element you will first need to select it, then:

* Go to the **Right panel** and scroll to the bottom
* Click the **+ icon** on the **Animation** tab.
* Select the animation you want from the dropdown menu
* Customize it by adjusting the animation's direction, interation count, ease type, duration and delay.
* Check Animate on reveal to play the animation when the element appears in the viewport.

| To make an animation play in an endless loop, in the **Iteration** field add **infinite**.

![How to use animations in TeleportHQ](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/animations-help_10mkm38.gif)

## Use external libraries

Another way to add animations to your project is by using external JS/CSS libraries such as [https://animate.style/](https://animate.style/).

||| Styles added using external libraries only work after exporting or publishing the project.

To enable a library like animate.style go to **Project settings -> Custom code -> Head** and add the code in their documentation. In this case it’s: 

```
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
```

To use the animations you first need to add them as CSS classes in the editor.

Go to the **Left panel -> CSS Classes**, click the **+** button and create an empty class with the name of the animation you want.

For example, to make your element bounce you will need to create two classes: **animate__animated (will be added to any element you want to animate)** and **animate__bounce** and add them both to your class list.

To add the animation on an element go to the **Right panel** -> **Classes** and select **animate__animated** and **animate__bounce** from the list.

|| There are many other animation libraries out there. Feel free to use any of them.

![External CSS animations](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/css-library-animation_18wuudr.gif)

## Use the transition property

You can also create simple CSS animations directly in TeleportHQ using only the **"transition"** property.

“Transition” controls the way in which an element changes from its normal state to a different state such as **hover** or **active**.

To make this work, design your element in both normal and alternative state. Then add the transition property on the normal state to control how the element changes.

With transition you can control: **duration, delay, timing function** and more.

You can learn more about how to use the CSS Transition property right here: [https://developer.mozilla.org/en-US/docs/Web/CSS/transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)

![CSS Transition property animation](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/css-transition-animation_bdwl4t.gif)

Finally, if you want to use keyframe animations, go to **Project Settings** and inject the keyframe there. Then, just create CSS classes that use that specific animation.

To learn more about using Lottie animations in TeleportHQ check out this [article](/en/article/how-to-add-lottie-animations-to1dmc/).