Animate existing object using CSS

  • cookiearchitect

    (@cookiearchitect)


    5 years, 10 months ago

    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

    (@eleopard)

    5 years, 10 months ago

    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.