title: How to use Media Queries inside a React Styled Components Keyframe?
body: <p>I can get media queries to work properly inside a regular <code>styled-components</code> component however when I attempted to use it in a <code>keyframe</code> (via import from <code>styled-components</code>) it does not seem to work at all.</p>
  
  <p>Attempting to get a div to animate to a specific position, but have that end position change when the window is &lt; 800px, I've attempted this:</p>
  
  <pre><code>import styled, { keyframes } from 'styled-components';
  
  // ... further down ...
  
  const slideAnim = keyframes`
    100% {
      top: 20px;
      left: 30px;
    }
  
    @media (max-width: 800px) {
      top: 70px;
      left: 50px;
      }
  
  `;
  </code></pre>
  
  <p>I have also tried putting the media query in the <code>100%</code> block:</p>
  
  <pre><code>const slideAnim = keyframes`
    100% {
      top: 20px;
      left: 30px;
  
      @media (max-width: 800px) {
         top: 70px;
         left: 50px;
      }
    }
  `;
  </code></pre>
  
  <p>I made a helpful interactive demonstration of what I am trying to achieve (problem code is at line 24):
  <a href="https://codesandbox.io/embed/fragrant-star-m71ct" rel="noreferrer">https://codesandbox.io/embed/fragrant-star-m71ct</a></p>
  
  <p>Feel free to change the <code>breakpoint</code> variable from 800 if you need to.</p>
  
  <p>Any help is appreciated!</p>