Error when minifying CSS with @keyframes

Question

I'm using the default bundling and minification in MVC 4.

One of our stylesheets starts with this bit of CSS:

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

        to { right: 0 }
    }

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

        to { right: 0 }
    }
}

The minification fails with this error: run-time error CSS1019: Unexpected token, found '}' and it points to the first character on line 13 (that's the very last } in the snippet above).

I'm not overly familiar with CSS in general and I was wondering:

1. Is that valid CSS? It fails validation at https://jigsaw.w3.org/css-validator/validator
2. What changes are needed to get the file minified? There are about 300 lines in the file so I would really like to get it minified if possible.

Answer 1

@keyframes declarations must be outside media queries.

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

    to { right: 0 }
}

And then you use them in the media query like this:

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