Using Animate It with CSS

Dear Tim,

Thanks for using the Animate It!

For customizing your own CSS, you would have to check the animate-animo.css in the plugin, and then add the animation name to my CSS.

e.g. lets say I wish to add a fadeIn aniamtion to “my-custom-class”
I would go to animate-animo.css, line 834 and copy all the rules in .animated.fadeIn

Now the other general rules that are added by .animated class have to be added as well.

So the CSS finally becomes:

.my-custom-class{
	/* Every CSS class would have these common rules */
   -webkit-animation-duration: 1s;
      -moz-animation-duration: 1s;
        -ms-animation-duration: 1s;
          -o-animation-duration: 1s;
	backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	animation-fill-mode: both;
	transform: translate3d(0, 0, 0);

	-o-animation-fill-mode: both;
	-o-transform: translate3d(0, 0, 0);

	-moz-animation-fill-mode: both;
	-moz-transform: translate3d(0, 0, 0);

	-webkit-animation-fill-mode: both;
	-webkit-transform: translate3d(0, 0, 0);
	
	/* Change this part as per your animation requirements */
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
}

Please let me know if this works for you.