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...