CODEWITHSUNDEEP
asp.net-mvc-4bundling-and-minification
dlarkin77
dlarkin77

Reputation: 879

Error when minifying CSS with @keyframes

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.

Upvotes: 5

Views: 3005

Answers (2)

joeshmoe301
joeshmoe301

Reputation: 1418

To add to @Flower's answer:

If you need the animation to work differently based on a media query, make multiple keyframes with different names. Then in the media query use the animation-name for the needed keyframe.

@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;
    }
}

Like @Flower said, just make sure the keyframes are not in the media query.

Upvotes: 0

Flower
Flower

Reputation: 31

@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;
    }
}

Upvotes: 2

Related Questions