“@keyframe 不会级联”是什么意思？答案

【问题标题】：What does “@keyframe doesn't cascade" mean?“@keyframe 不会级联”是什么意思？
【发布时间】：2016-06-29 22:32:21
【问题描述】：

我正在阅读this，上面写着

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

这里的“级联”是什么意思？英语不是我的母语，没有更详细的解释，所以我不明白它的意思。谁能举个例子解释一下？

【问题讨论】：

这可能会有所帮助developer.mozilla.org/en-US/docs/Web/CSS/Cascade
这与 CSS 中其他地方的“级联”的含义没有任何不同。你确实意识到这就是 CSS 中的 C 所代表的意思，对吧？奇怪你现在才应该有这个问题。
看看这个fiddle。 color-change 动画有两个定义，两个定义中都有不同的帧百分比选择器，但您会看到最新的 @keyframe 规则是如何获胜的，并且它们没有组合在一起。
div{display:block}, div{display:none !important}。对于这些声明，我可以说后一个 css 声明是“胜过/覆盖/级联”前一个。这是正确的吗？

标签： css css-animations keyframe

【解决方案1】：

CSS 级联示例：-

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

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

在上面的示例中，h1 元素的字体大小首先在第一条规则中设置为 12px，然后被第二条规则。宽度在第一条规则中设置，高度在第二条规则中设置。这是级联的：多个规则决定最终应用的样式，优先级按规则降序排列。

关键帧级联示例

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

【讨论】：