Question

我正在阅读this，它说

@keyframes规则不会级联，因此动画永远不会派生关键帧来自多个规则集。

＆＃34; cascade＆＃34;这意味着什么英语不是我的母语，没有更详细的解释，所以我不明白这意味着什么。任何人都可以用一个例子来解释这个吗？

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 覆盖为 14px 第二条规则。宽度在第一个规则中设置，高度在第二个规则中设置。这是级联：多个规则确定应用的最终样式，优先级按规则降序排列。

关键帧级联的示例

/* 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 动画。

什么“@keyframe没有级联＆＃34;意思？

1 个答案: