Question: 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:

```
@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. */

```

This doesn't work (it uses the first version of `slideUp` 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)?

Answer: 
I don't know why no one else has suggested this, but instead of setting the keyframes in the media query you can set the animation in the media query.

```
@media(max-height:500px) 
{
    #selectorGroup {
        animation: slideUp500 1s forwards;
    }
}

@media(max-height:750px) 
{
    #selectorGroup {
        animation: slideUp750 1s forwards;
    }
}

@keyframes slideUp500 {
    0%    { transform: translate3d(0,500px,0); }
    100%  { transform: translate3d(0,0,0); }
}

@keyframes slideUp750 {
    0%    { transform: translate3d(0,750px,0); }
    100%  { transform: translate3d(0,0,0); }
}

```
A way of doing a slide up animation regardless of screen or element height is to use `position: fixed`: 

```
.box {
    position: fixed;
    animation: slideUp 1s forwards;
}

@keyframes slideUp {
    from { top: 100%; }
    to { top: 0; }
}

```

**Demo:** <http://jsfiddle.net/myajouri/Kvtd2/>

If you want to slide relative to a parent element and not the viewport, use `position: absolute` instead.