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;
}
}
$ npm install postcss-mq-keyframes --save-dev
postcss([ require('postcss-mq-keyframes') ])
See PostCSS docs for examples for your environment.