Multiple CSS keyframe animations using transform property not working

Question

While working with CSS keyframe animations I found that when I give an element two animations like:

.element {     animation: animate1 1000ms linear infinite,                animate2 3000ms linear infinite; } 

If both of the animations animate using the transform property only the last one triggers through cascading. But if the @keyframes animations are lets say one margin or display or some other css attribute and the other uses transform then they both trigger.

here is a codepen example with the relevant code below.

CSS

@keyframes move {     0%, 100% { transform: translateX(0px); }     50% { transform: translateX(50px); } } @keyframes skew {     0%, 100% { transform: skewX(0deg); }     50% { transform: skewX(15deg); } } @keyframes opacity {     0%, 100% { opacity: 1; }     50% { opacity: .25; } }  .taco {     animation: skew 2000ms linear infinite,                opacity 4000ms linear infinite; } 

In the Above they both trigger

.burger {     animation: skew 2000ms linear infinite,                move 4000ms linear infinite; } 

In the above only the last triggers (through cascading)- why?

Anyone have a solution for this without using js? Or is this something that just doesn't work? The example is quite simple and I know that I could combine the animations into one and not have to declare both but this was a test for a more complex animation I was working on.

thanks

Answer 1

You cannot animate same attribute ( here transform attribute ) more than once, on a same element, the last one will overwrite other,

You should put your target element into a div, and apply one transform-animation on the div and other transform-animation on the target element....

.div_class {     animation:animate1 1000ms linear infinite; }  .element {         animation:animate2 3000ms linear infinite; }