When working with animations, there may be occasions when we need to use custom effects; one way to achieve this is through the use of @keyframes. Trouble is, some browsers don't support their use within media queries (yes, I'm looking at you, IE10 and IE11!).

How does this affect us, I hear you ask? Well, if you're building any responsive sites, then this is absolutely something we need to bear in mind; media queries form the basic structure for any responsive functionality.

It's an easy fix though—the developer, Andy Walpole, has created a simple PostCSS plugin called mq-keyframes, which is available at https://github.com/TCotton/postcss-mq-keyframes.

Imagine we have code such as this in our style sheet:

@media only screen and (min-width: 375px) {
  .custom-bounce {
    animation: side-bounce 5s;
  }

  @keyframes side-bounce {
    100% {
      opacity: 0;
    }
  }
}

All the plugin does is move the code to the bottom of our style sheets, which makes it easier to read, and allows IE to continue working correctly:

@media only screen and (min-width: 375px) {
  .pace {
    animation: pace-anim 5s;
  }
}

@keyframes pace-anim {
  100% {
    opacity: 0;
  }
}

This is probably one of the simplest plugins to use in PostCSS, particularly where animating content is concerned; it's worth using if you have to support these versions of Internet Explorer! The plugin can be installed in the same way as most other plugins for PostCSS, and does not require any additional attributes as part of the configuration process.