This plugin will move any keyframe animations from inside media queries to the bottom of the CSS file.

See known issues on the caniuse.com page for CSS animation: 'IE10 and IE11 do not support CSS animations inside media queries.'

Input:

@media only screen and (min-width: 415px) {
    .pace {
        animation: pace-anim 5s;
    }
    @keyframes pace-anim {
        100% {
            opacity: 0;
        }
    }
}

Output:

@media only screen and (min-width: 415px) {
    .pace {
        animation: pace-anim 5s;
    }
}
@keyframes pace-anim {
    100% {
        opacity: 0;
    }
}

Install

$ npm install postcss-mq-keyframes --save-dev

Usage

postcss([ require('postcss-mq-keyframes') ])

See PostCSS docs for examples for your environment.