Title: Animate existing object using CSS
Last modified: May 16, 2020

---

# Animate existing object using CSS

 *  [cookiearchitect](https://wordpress.org/support/users/cookiearchitect/)
 * (@cookiearchitect)
 * [6 years ago](https://wordpress.org/support/topic/animate-existing-object-using-css/)
 * Hello,
 * Your plugin is really good, now I know how to animate widgets and objects in 
   the editor.
 * However, I’m using a theme that I’m good with the design that comes with it and
   now I want to animate object in this theme e.g. button, woocommerce product image.
 * Is it possible to use your animation with the child theme custom CSS file?
 * Here’s pseudo code. For example, I want to fadein all buttons and products in
   woocommerce archive page on scroll
    .button { animated fadeIn duration1 eds-on-
   scroll } .product { animated fadeInUp duration1 eds-on-scroll }
 * Any code example how to do this would be appreciate.
 * Thanks,
    Cookie

Viewing 1 replies (of 1 total)

 *  Plugin Author [eleopard](https://wordpress.org/support/users/eleopard/)
 * (@eleopard)
 * [6 years ago](https://wordpress.org/support/topic/animate-existing-object-using-css/#post-12863461)
 * Hi Cookie Architect,
 * Apologies for the delayed reply, and thanks for using the Animate It!
 * HI am afraid on scroll cannot be added using the CSS, it would require adding
   the actual class, which is then detected by script to apply the On Scroll animation.
 * For the rest you can just add the classes.
    this should do the trick for you:
 *     ```
       .button, .product {
       	/* Animation General Classes */
       	-o-backface-visibility: hidden;
       	-moz-backface-visibility: hidden;
       	-webkit-backface-visibility: hidden;
       	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);
       }
       .button {
       	/* Animation Duration */
       	-webkit-animation-duration: .5s !important;
       	-moz-animation-duration: .5s !important;
       	-ms-animation-duration: .5s !important;
       	-o-animation-duration: .5s !important;
       	animation-duration: 0.5s !important;
       	/* Animation Name */
       	-webkit-animation-name: fadeIn;
       	-moz-animation-name: fadeIn;
       	-o-animation-name: fadeIn;
       	animation-name: fadeIn;
       }
       .product {
       	/* Animation Duration */
       	-webkit-animation-duration: .5s !important;
       	-moz-animation-duration: .5s !important;
       	-ms-animation-duration: .5s !important;
       	-o-animation-duration: .5s !important;
       	animation-duration: 0.5s !important;
       	/* Animation Name */
       	-webkit-animation-name: fadeInUp;
       	-moz-animation-name: fadeInUp;
       	-o-animation-name: fadeInUp;
       	animation-name: fadeInUp;
       }
       ```
   
 * Please let me know if it works for you.

Viewing 1 replies (of 1 total)

The topic ‘Animate existing object using 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/)

 * 1 reply
 * 2 participants
 * Last reply from: [eleopard](https://wordpress.org/support/users/eleopard/)
 * Last activity: [6 years ago](https://wordpress.org/support/topic/animate-existing-object-using-css/#post-12863461)
 * Status: not resolved