Add css3 animation to a block

< 1 min read

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‘.

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