Defining keyframe animations inside media queries

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 1

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); } } 

Answer 2

Nowadays you can solve this using native CSS variables.

In your case:

@media(max-height:500px) {     :root {         --slide-up-y: 500px     } }  @media(max-height:750px) {     :root {         --slide-up-y: 750px     } }  @keyframes slideUp {     0%    { transform: translate3d(0,var(--slide-up-y),0); }     100%  { transform: translate3d(0,0,0); }   } }