Question

我正在使用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：意外的令牌，找到'}'，它指向第13行的第一个字符（这是上面代码段中的最后一个字符} ）。

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

这是有效的CSS吗？它未通过验证 https://jigsaw.w3.org/css-validator/validator
缩小文件需要进行哪些更改？文件中大约有300行，所以我真的希望尽可能缩小它。

Answer 1

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

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

    to { right: 0 }
}

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

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

Answer 2

要添加到@Flower的答案中：

如果您需要动画根据媒体查询来不同地工作，请制作多个具有不同名称的关键帧。然后在媒体查询中，为所需的关键帧使用animation-name。

@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所说的那样，只需确保关键帧不在媒体查询中即可。

使用@keyframes

2 个答案: