Multiple animation with one element not working. Why keyframes in css don't work?

[Masohas]

I wanted that after the page is loaded the entire content of the page appeared, but when i added spawning animations on the ".hamburger" the rotation animation does not work then, but but as I remove reappearance animations it all works. How do i have rotation and appearance animations?

 

I don't understand why keyframes don't work

 

the line of code that causes the element to appear, when it is deleted, rotation will work

        .from('.hamburger', 0.3, {x:-100,})

See the Pen NWYKOPQ by jarek-babiak (@jarek-babiak) on CodePen

[SteveS]

I'm not sure I see the issue. Everything looks good to me. If you are having issues with CSS animations and GSAP conflicting, I would suggest moving your CSS animations to GSAP. The performance is similar in most cases and you are going to have to import GSAP anyway.

[GreenSock]

Yeah, I don't really understand your question here, @Masohas. Can you elaborate? I don't notice any problems. 

[Masohas]

7 hours ago, GreenSock said:

Tak, naprawdę nie rozumiem tutaj twojego pytania,@Masohas. Czy możesz rozwinąć? Nie widzę żadnych problemów. 

I noticed that keyframes on "hamburger" element doesn't work if I add gsap on this element

.animationToggler {
    animation: animationTogglerMenu .8s ease;
}

@keyframes animationTogglerMenu {

    100% {
        transform: rotate(360deg);
    }
}

Just add this line of code to the timeline "preloaderTl"

.from('.hamburger', 0.3, {x:-100,})

How to make keyframes work?

[GreenSock]

Oh, right, you can't have an inline transform and also a CSS animation that's changing it. That isn't logically feasible. It's just how browsers work - it's not a GSAP issue or anything.

 

I'd strongly recommend using GSAP for all your animations, especially transform-related ones. It offers far more flexibility, like animating each component independently (x, y, rotation, scaleX, scaleY, etc.)