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

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

Answer 2

现在你可以使用原生 CSS 变量来解决这个问题。

在你的情况下：

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

Answer 3

无论屏幕或元素高度如何，执行向上滑动动画的一种方法是使用position: fixed：

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

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

演示： http: //jsfiddle.net/myajouri/Kvtd2/

如果您想相对于父元素而不是视口滑动，请position: absolute改用。