使用 @keyframes 缩小 CSS 时出错答案

【问题标题】：Error when minifying CSS with @keyframes使用 @keyframes 缩小 CSS 时出错
【发布时间】：2015-11-18 05:06:38
【问题描述】：

我在 MVC 4 中使用默认的捆绑和缩小。

我们的一个样式表以这段 CSS 开头：

@media (max-width: 979px) {
    @keyframes sidebarSlideInRight {
        from { right: -220px }

        to { right: 0 }
    }

    @-webkit-keyframes sidebarSlideInRight {
        from { right: -220px }

        to { right: 0 }
    }
}

缩小失败并出现以下错误：运行时错误 CSS1019: Unexpected token, found '}' 它指向第 13 行的第一个字符（即 sn- 中的最后一个 } p 以上）。

总的来说，我对 CSS 并不太熟悉，我想知道：

这是有效的 CSS 吗？它在验证失败 https://jigsaw.w3.org/css-validator/validator
需要进行哪些更改才能缩小文件？该文件大约有 300 行，所以如果可能的话，我真的很想把它缩小。

【问题讨论】：

您找到解决此问题的方法了吗？我们面临着完全相同的问题。
我解决了这个问题，方法是使用在线压缩器缩小文件，然后将缩小后的文件添加到 Bundle 中，而不是使用 StyleBundle 进行任何转换。
@dlarkin77 嗨，你找到解决方案了吗？

标签： asp.net-mvc-4 bundling-and-minification

【解决方案1】：

@keyframes 声明必须在媒体查询之外。

@keyframes sidebarSlideInRight {
    from { right: -220px }

    to { right: 0 }
}

然后你像这样在媒体查询中使用它们：

@media (max-width: 979px) {
    .some-class {
        animation: sidebarSlideInRight 1s;
    }
}

【讨论】：

【解决方案2】：

要添加到@Flower 的答案：

如果您需要动画根据媒体查询以不同方式工作，请使用不同名称制作多个关键帧。然后在媒体查询中使用所需关键帧的动画名称。

@keyframes sidebarSlideInRight-1 {
    from { right: -220px }
    to { right: 0 }
}

@keyframes sidebarSlideInRight-2 {
    from { right: -250px }
    to { right: 50 }
}

@media (max-width: 768px) {
    .some-class {
        animation: sidebarSlideInRight-1 1s;
    }
}

@media (max-width: 979px) {
    .some-class {
        animation: sidebarSlideInRight-2 1s;
    }
}

就像@Flower 所说，只要确保关键帧不在媒体查询中。

【讨论】：