Override CSS? How Can I Accomplish This?

  • Fellas,
    I love the plugin it makes my life simple.

    It looks like the plugin injects the styles inline. Can I override them? I’d like to increase the distance of fadeInRight and fadeInLeft. How do I pull that off without destructive plugin updates?

    Below is what I’d like to do.

    /*Animate It Fades Overrides*/
    @keyframes fadeInRight { from {opacity: 0; transform: translate3d(500%, 0, 0); } }
    @keyframes fadeInLeft { from {opacity: 0; transform: translate3d(-500%, 0, 0) } }

    Can this be executed via custom_css_class= “”???

Viewing 1 replies (of 1 total)
  • Plugin Author eleopard

    (@eleopard)

    Dear Scott,

    Thanks for using Animate It!

    Regarding the changes. you can definitely make them via CSS override.
    However, just in case, have you checked FadeinRightBig and FadeinLeftBig?
    As these animations are made for the larger fade ins.

    For the customization, please do the following:

    1. in the WordPress backend, Go to Settings > Animate It! > Custom CSS Box.

    2. Paste the following:

    @-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-500%);
	}
}

@-moz-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-500%);
	}
}

@-o-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-500%);
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-500%);
	}
}
@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(500%);
	}
}

@-moz-keyframes fadeInRight {
	0% {
		opacity: 0;
		-moz-transform: translateX(500%);
	}
}

@-o-keyframes fadeInRight {
	0% {
		opacity: 0;
		-o-transform: translateX(500%);
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translateX(500%);
	}
}

    3. Save.

    You can see a working demo of this here:
    https://animateitdemo.wpdevcloud.com/tr_TR/post-for-scott/

    Please not that I have sent the Animation Duration to 4 here, so that the animation runs smoothly.
    works for you.resolved your issue.

Viewing 1 replies (of 1 total)
  • The topic ‘Override CSS? How Can I Accomplish This?’ is closed to new replies.