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-devpostcss([ require('postcss-mq-keyframes') ])See PostCSS docs for examples for your environment.