css - 在媒体查询中定义关键帧动画

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

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

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