Adding CSS animations to your Brilliant Directories site can be as easy as adding some extra classes to the elements you wish to animate. We have a list of CSS rules compile in a min version, that allow you to simply add a couple of classes to the different elements of your site and just like that, you will add animation to said elements. 


The animation CSS min version should  be added to the "Custom CSS / HEAD Code" section of your site. You can get to this section by navigating to "Settings" -- "Design Settings"  -- "Custom CSS / Head", like this:









Once the min CSS has been added to this section, the next step is to choose which element you want to animate and identify what type of animation you want to add, these are the current available animations:


bounce

flash

pulse

rubberBand

shake

headShake

swing

tada

wobble

jello

bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInUp

bounceOut

bounceOutDown

bounceOutLeft

bounceOutRight

bounceOutUp

fadeIn

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInUp

fadeInUpBig

fadeOut

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUp

fadeOutUpBig

flipInX

flipInY

flipOutX

flipOutY

lightSpeedIn

lightSpeedOut

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

hinge

rollIn

rollOut

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

zoomOut

zoomOutDown

zoomOutLeft

zoomOutRight

zoomOutUp

slideInDown

slideInLeft

slideInRight

slideInUp

slideOutDown

slideOutLeft

slideOutRight

slideOutUp


These animation classes should go in the element's tag that you wish to animate. This is an example of how to add the animation classes to the an element of your site:







As you can see before the specific animation type another class should be added which is "animated". Before choosing the type of animation that you want to display, the class animated should be added, as this is what will instruct browsers to start the animation instructions.


Here is an example of how the search module loads, once the animation has been added:






Animations can be used on any element of your website. This is a great way to add more visibility to specific sections of your website as the elements with animations stand out from the rest. 


Please request for the animation min CSS to be added to your site, this has an associated cost of 50 credits.