Edit Question - KnowledgeHub

Title Body

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

Tags (comma-separated) Cancel