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