---
title: Add css3 animation to a block
description: In our full site editing themes we have added the ability to add css3 animations to any block you like by using classes. These animations will create a nice entrance effect when the block enters the display. In the Advanced…
url: "https://vivathemes.com/knowledge-base/add-css3-animation-to-a-block/"
updated: "2022-09-08"
category: Theme Tutorials
---

# Add css3 animation to a block

In our full site editing themes we have added the ability to add css3 animations to any block you like by using classes. These animations will create a nice entrance effect when the block enters the display.

In the Advanced section of any block settings add the '**animated**' class. This class will tell the theme this block will animate. You need to combine this with another class to define which animation you will be using like '**fadeIn**'.

![](https://vivathemes.com/wp-content/uploads/2022/09/blockanimation.jpg)

Available animations are:

### Fade effect

*fadeIn fadeInRight fadeInLeft fadeInUp fadeInDown fadeInUpShort fadeInDownShort fadeInRightShort fadeInLeftShort*

### Flip & Rotate

*flip flipInX flipInY rotateIn rotateInUpLeft rotateInUpRight rotateInDownLeft rotateDownUpRight rollIn lightSpeedInRight lightSpeedInLeft*

### Bounce

*bounceIn bounceInRight bounceInLeft bounceInUp bounceInDown*

### Attention seekers

*growIn shake shakeUp wiggle swing tada wobble pulse*

### Delay animations

Add the following classes to delay any animation, measured in milliseconds.

*delay-250 delay-500 delay-750 delay-1000 delay-1250 delay-1500 delay-1750 delay-2000 delay-2250 delay-2500 delay-2750 delay-3000 delay-3250 delay-3500*

### Animation speed

Use below classes to slow down animation

*slow slower slowest*