asp.net-mvc-4 – 使用@keyframes缩小CSS时出错

发布时间：2020-12-16 09:41:33 所属栏目：asp.Net 来源：网络整理

导读：我正在使用MVC 4中的默认捆绑和缩小. 我们的一个样式表从这个CSS开始： @media (max-width: 979px) { @keyframes sidebarSlideInRight { from { right: -220px } to { right: 0 } } @-webkit-keyframes sidebarSlideInRight { from { right: -220px } to { r

我正在使用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行,所以如果可能的话我真的想让它缩小.

解决方法

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

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

    to { right: 0 }
}

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!