在媒体查询中定义关键帧动画 [英] Defining keyframe animations inside media queries

问题描述

我试图使对象从屏幕底部滑入，但是由于我无法将屏幕高度作为CSS中的一个单位来获取，因此我试图通过媒体查询来做到这一点，例如因此：

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

这是行不通的（无论高度如何，它都使用 slideUp 的第一个版本），所以我假设一旦定义了关键帧，就不能根据媒体查询来覆盖或重新分配关键帧？有什么方法可以达到这种效果（除了具有许多不同的关键帧设置并使用媒体查询将适当的关键帧设置分配给类之外）？

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)?

推荐答案

我不解释为什么没有其他人建议这样做，但您可以在媒体查询中设置动画，而不是在媒体查询中设置关键帧。

I don't why nobody 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); }
}

这篇关于在媒体查询中定义关键帧动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！