title: Disable existing CSS keyframe animation with additional CSS rules
body: <p>I'm working on adding support for the <a href="https://css-tricks.com/introduction-reduced-motion-media-query/" rel="nofollow noreferrer">prefers-reduced-motion</a> on a very animation-heavy site. Since the feature is opt-in and not well supported right now, I need to have my animations outside a media query and then additional CSS rules to disable the animation inside <code>@media screen and (prefers-reduced-motion: reduce) {}</code></p>
  
  <p>There are two animations, <code>vertical-animate</code> and <code>horizontal-animate</code>. Both go from 0% straight to 100% changing opacity from 0 to 1 and top/left from 100px to 0px.</p>
  
  <p>Right now, I have the following in an attempt to reset both the keyframes and animation property:</p>
  
  <pre><code>@media screen and (prefers-reduced-motion: reduce) {
  
      @-webkit-keyframes vertical-animate {}
      @keyframes vertical-animate {}
      @-webkit-keyframes horizontal-animate {}
      @keyframes horizontal-animate {}
  
      * {
          -webkit-animation: none !important;
          -moz-animation: none !important;
          -o-animation:  none !important;
          animation: none !important;
      }
  
  }
  </code></pre>
  
  <p>This successfully prevents the animation but it also leaves the animated elements invisible! Using dev tools, I can see they're essentially stuck at <code>opacity: 0</code> and <code>[top/left]: 100px</code>.</p>
  
  <p>(FWIW, I'm testing without the media query to see the result.)</p>
  
  <p>How can I write additional CSS (as little as possible, please!) that disables an animation so that design appears as it would at the end of the existing completed keyframe animation?</p>