title: Defining keyframe animations inside media queries
body: <p>I'm trying to get objects to "slide in" from the bottom of the screen, but since I can't get the screen height as a unit in CSS, I'm trying to do this with media queries, like so:</p>
  
  <pre><code>@media(max-height:500px) {
    @keyframe slideUp {
      0%    { transform: translate3d(0,500px,0); }
      100%  { transform: translate3d(0,0,0); }
    }
  }
  @media(max-height:750px) {
    @keyframe slideUp {
      0%    { transform: translate3d(0,750px,0); }
      100%  { transform: translate3d(0,0,0); }
    }
  }
  /* etc. */
  </code></pre>
  
  <p>This doesn't work (it uses the first version of <code>slideUp</code> regardless of height), so I assume keyframes, once defined, cannot be overwritten or reassigned based on media queries? Is there any way to achieve this effect (short of having many different keyframe setups and using a media query to assign the appropriate one to the class)?</p>