Title: Using Animate It with CSS
Last modified: September 26, 2017

---

# Using Animate It with CSS

 *  [Big Impact Design](https://wordpress.org/support/users/baggi-t/)
 * (@baggi-t)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/using-animate-it-with-css/)
 * Hello,
    I’m using Animate It with widgets and in HTML and finding it very useful.
   I want to use it now in my CSS styles. How do I use your class generator as properties
   and values with my selectors? Many thanks Tim, London

Viewing 1 replies (of 1 total)

 *  Plugin Author [eleopard](https://wordpress.org/support/users/eleopard/)
 * (@eleopard)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/using-animate-it-with-css/#post-9531545)
 * 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.

Viewing 1 replies (of 1 total)

The topic ‘Using Animate It with CSS’ is closed to new replies.

 * ![](https://ps.w.org/animate-it/assets/icon-256x256.png?rev=989356)
 * [Animate It!](https://wordpress.org/plugins/animate-it/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/animate-it/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/animate-it/)
 * [Active Topics](https://wordpress.org/support/plugin/animate-it/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/animate-it/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/animate-it/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * 1 reply
 * 2 participants
 * Last reply from: [eleopard](https://wordpress.org/support/users/eleopard/)
 * Last activity: [8 years, 8 months ago](https://wordpress.org/support/topic/using-animate-it-with-css/#post-9531545)
 * Status: not resolved