search

animate-css / animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
https://animate.style/
Other
80.84k stars 16.24k forks source link

Transform Property Doesn't Work After Using Animate.css #1117

Closed ApplePieGiraffe closed 4 years ago

ApplePieGiraffe commented 4 years ago

Hi, there!

In a few of my projects, I've noticed that after I animate an element by adding the animation classes from Animate.css to it, I can no longer use the transform property on that element in my own stylesheet (i.e., the transform property in my stylesheet seems to have no effect, even if my stylesheet is linked after the Animate.css stylesheet in my markup).

Is there any reason why that happens? Or am I doing something wrong?

eltonmesquita commented 4 years ago

This is the way CSS works. animate.css is just overwriting any previous transform declaration (we use transform in most of the animations). The easy and quick "fix" is to add a wrapper to the element and animate this wrapper instead.

I'm closing this as it's not an issue with the library. I'll try to add a section in the docs with guidelines about this.

ApplePieGiraffe commented 4 years ago

Ah, I see.

Sorry to bother you, then.

Thanks for your help!

On Fri, Sep 18, 2020 at 12:19 PM Elton Mesquita notifications@github.com wrote:

Closed #1117 https://github.com/animate-css/animate.css/issues/1117.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/animate-css/animate.css/issues/1117#event-3781718957, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMGRXO7I33IIVEGZFYFUIHDSGMQ33ANCNFSM4RRUVM6Q .

Directory commented 3 years ago

this isn't a fix but if u can use the animateCSS javascript wrapper function the docs suggested. it removes the animation class after the animation ends so the transform styles wont stick. however while an animation is playing your own transform styles will still get overridden so it may appear to pop in and out of position randomly. i advise the "wrapper" fix.

if you have too much time on your hands and disregard your mental and emotional wellbeing then there is a theoretical ultimate fix:

with js read the computed transform styles that you applied. then still within js read the animate.css keyframe style. at this point linking this lib from a cdn and hardcoded html classes is out of the question u would need some kind of css>js loader to read animate.css styles for your target animation. now write some sort of frankenstein transform style masher that can not only combine different types of transformations but also combine and offset the same kinds. so if an animation keyframe had transform: scale(.5) translateX(50%); and your styles had transform: translateX(-10%); then the output combination of the 2 would be transform: scale(.5) translateX(40%);. better hope that both kinds of transformations are using the same unit too else you may need calc(). Did i mention combining multi transform functions such as rotate3d() translate()? good luck with that. Anyway if combining the transform styles is successful all thats left is constructing the final css animation keyframe string + an animation class and injecting it into <head> as a <style> tag. then add that animation class to the target element and dispose of the style tag and class on animationend.

honestly...maybe just use a wrapper...