CODEWITHSUNDEEP
csscss-animationskeyframe
shenkwen
shenkwen

Reputation: 3880

What does “@keyframe doesn't cascade" mean?

I was reading this, it says

@keyframes rules don't cascade, so animations never derive keyframes from more than one rule set.

what does "cascade" mean here? English is not my native language and there is no more detailed explanation so I don't understand what it means. Can anyone explain this with an example?

Upvotes: 0

Views: 340

Answers (1)

Ben
Ben

Reputation: 1454

An example of CSS cascading: -

h1 {
    font-size: 12px;
    width: 200px; /* Sets width */
}

h1 {
    font-size: 14px; /* Overrides 12px rule above */
    height: 200px; /* Sets height */
}

In the above example the h1 elements font size is first set to 12px in the first rule and then overridden to be 14px by the second rule. The width is set in the first rule and the height is set in the second rule. This is cascading: multiple rules determine the final styles applied, with priority given to properties in the rules descending order.

An example of Keyframes cascading

/* WILL NOT CASCADE */

@keyframes exampleAnimation {
    0% { top: 0; left: 0; margin: 10px; }
    100% { top: 100px; margin: 20px; }
}

@keyframes exampleAnimation {
    0% { top: 0; left: 0; }
    100% { top: 0; left: 100px; }
}

The above example will not cascade. That is to say, only the last rule declaration is used for the animation. The animation will move the animating element 100px to the left, it will ignore the top and margin animations set in the previous rule declaration.

Upvotes: 1

Related Questions