Что делает «@keyframe не каскад» означает?

Question

Я читал this, это говорит

@keyframes правило не каскад, поэтому анимация никогда не получить ключевые кадры из набора более чем одно правила.

, что делает «каскад» значит здесь? английский не является моим родным языком, и нет более подробное объяснение, так что я не понимаю, что это значит. Может кто-нибудь объяснить это на примере?

Answer 1

Пример CSS каскадные: -

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

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

В приведенном выше примере h1 элементов размер шрифта сначала установлен на 12px в первом правиле, а затем переопределяется, чтобы быть 14px по второму правилу , Ширина устанавливается в первом правиле, а высота устанавливается во втором правиле. Это каскадирование: несколько правил определяют применяемые окончательные стили, причем приоритет присваивается свойствам в порядке убывания правил.

Пример Keyframes каскадные

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

приведенный выше пример не будет каскад. То есть только последнее объявление правила используется для анимации. Анимация будет перемещать анимационный элемент 100px влево, он будет игнорировать top и margin анимации, установленные в предыдущем объявлении правила.