##  [Animation Tab](/hc/documentation/learn-dxpr-builder/getting-started/animation-tab) 

Add motion effects to make elements stand out from the rest of the page.

Follow the steps below to start adding animations to your element:

- Click on the **+** icon
- Go to the **Content** tab
- Select an element
- Go to the **Animation** tab
- Select an animation option from the **Animation Start** settings
    
    
    - **On Appear** means the animations will begin once the element appears in the browser window
    - **On Hover** means the animations will begin once you mouse over the element
    - **On Click** means the animations will begin once you click on the element
    - **On Trigger** means the animation will appear once triggered by a script

1. Select an **Animation In** that will appear once the Start Animation begins. For example if you select Hover, the animation will appear once the mouse is over the element
2. *Optionally,* Select an **Animation Out** that will appear once the Start Animation stops. For example if you select Hover, the animation will appear once the mouse is not over the element anymore
3. Set the option for the element to be **Hidden**, before or after the In-Animation. Mainly this is used when the In-Animation is set to an animation that has "in". For example: if you select to hide the element **Before** the in-animation. If your start animation option is **On Click**, the element won't be visible until you click it (so don't do this).
4. Set the boundary of the element in the **Appearance Boundary*****.*** For example if set to 50 the animation will start once the element is scrolled past the middle of the browser window. Setting this to 100% will have the element animate immediately when the element scrolls into the browser window.
5. Switch on the **Infinite** for the animation to keep repeating
6. Set the **Duration** of the animation in milliseconds (lower duration equals faster motion)
7. Set a delay for the in animation by the **In-Delay** settings (higher delay equals slower motion)
8. Set a delay for the out animation by the **Out-Delay** settings (higher delay equals slower motion)
9. Once you’ve selected your preferred settings, you can click on **Save Changes** and you're done!