Определение анимации ключевого кадра внутри медиа-запросов

Question

Я пытаюсь получить объекты для «скольжения» в нижней части экрана, но поскольку я не могу получить высоту экрана как единицу в CSS, я пытаюсь сделать это с запросами средств массовой информации, например, так:

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

Это не работает (он использует первую версию slideUp независимо от высоты), поэтому я предполагаю, что ключевые кадры после того, как определено, не могут быть перезаписаны или переназначены на основе запросов СМИ ? Есть ли способ достичь этого эффекта (не имея много разных настроек ключевого кадра и используя медиа-запрос, чтобы назначить соответствующий класс)?

Answer 1

способ сделать слайд вверх анимации, независимо от экрана или высоты элемента является использование position: fixed:

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

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

Демо:http://jsfiddle.net/myajouri/Kvtd2/

Если вы хотите, чтобы скользить относительно родительского элемента и а не в окне просмотра, вместо этого используйте position: absolute.

Answer 2

Если вы должны использовать translate3d получить аппаратное ускорение на мобильных устройствах (как вы упомянули), и учитывая, что вы не можете использовать в-правил внутри @media:

Вы можете определить один @keyframes с большим translateX (скажем 5000px) и измените значение animation-duration на основании высоты экрана, чтобы скорость была более или менее одинаковой на разных высотах.

Я бы также определил диапазоны высоты (max-height и min-height) в отличие от верхних пределов (max-height), чтобы предотвратить нежелательные переопределения стиля.

@keyframes slideUp { 
    from { transform: translate3d(0,5000px,0); } 
    to { transform: translate3d(0,0,0); } 
} 

.box { animation: slideUp 5s forwards; } 

@media (min-height: 0) and (max-height: 500px) { 
    .box { animation-duration: 0.5s; } 
} 

@media (min-height: 501px) and (max-height: 750px) { 
    .box { animation-duration: 0.75s; } 
} 

@media (min-height: 751px) and (max-height: 1000px) { 
    .box { animation-duration: 1s; } 
} 

DEMO:http://jsfiddle.net/myajouri/9xLyf/

Answer 3

Я не почему никто предложил это, но вместо того, чтобы устанавливать ключевые кадры в запросе медиа можно установить анимацию в запросе медиа.

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