何を意味「@keyframeがカスケードしない」のでしょうか？

Question

私はthisを読んでいた、それはアニメーションが複数のルールセットからキーフレーム を導き出すことはありませんので、

@keyframesルールは、カスケードをしませんと言います。

何「カスケード」ここで意味するのでしょうか？英語は私の母国語ではないと私はそれが何を意味するのか理解していないので、これ以上の詳細な説明がある。誰もが例でこれを説明できますか？

Answer 1

CSSカスケードの例： - H1要素のフォントサイズは、まず、第1のルールで12ピクセルに設定した後、第2の規則によって14pxことがオーバーライドされる上記の例で

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

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

を。幅は第1ルールに設定され、高さは第2ルールに設定されます。これはカスケードしています。適用される最終的なスタイルは複数のルールによって決定され、ルールの降順でプロパティに優先順位が与えられます。

/* 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に移動します、それはトップとマージン前ルール宣言にセットアニメーションを無視します。