Asp.net mvc 4 使用@keyframes缩小CSS时出错

我在MVC4中使用默认的捆绑和缩小

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

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

        to { right: 0 }
    }

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

        to { right: 0 }
    }
}

缩小失败，出现以下错误：运行时错误CSS1019:意外标记，找到“}”，它指向第13行的第一个字符（这是上面代码段中的最后一个}）

我一般不太熟悉CSS，我想知道：

这是有效的CSS吗？它在验证时失败

要缩小文件，需要进行哪些更改？文件中大约有300行，所以如果可能的话，我真的很想把它缩小

---

@关键帧声明必须在媒体查询之外

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

    to { right: 0 }
}

然后在媒体查询中使用它们，如下所示：

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

---

要补充@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所说，只需确保关键帧不在媒体查询中。

您是否找到解决此问题的方法？我们面临的是完全相同的问题。我通过使用在线缩小器缩小文件，然后将缩小后的文件添加到没有任何转换的捆绑包中，而不是样式捆绑包中，解决了这个问题。@dlarkin77 hi，您找到解决方案了吗？