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;
}