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

我试图让对象从屏幕底部“滑入”，但由于我无法在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

），因此我假设关键帧一旦定义，就不能根据媒体查询覆盖或重新分配？有什么方法可以达到这种效果（除了有许多不同的关键帧设置和使用媒体查询为类指定适当的关键帧设置之外）？

无论屏幕或元素高度如何，制作向上滑动动画的方法是使用

位置：fixed

：

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

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

演示：

---

如果要相对于父元素而不是视口滑动，请使用

位置：绝对
。
如果必须使用
translate3d
在移动设备上获得硬件加速（如您所述），并且您不能在
@media
内使用at规则，请使用
：

您可以使用大的
translateX
（比如
5000px
）定义一个
@关键帧
，并根据屏幕高度更改
动画持续时间
，以确保不同高度的速度大致相同

我还将定义高度范围（
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; }
}

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


@介质（最大高度：500px）
{
#选择器组{
动画：向前滑动500 1s；
}
}
@介质（最大高度：750px）
{
#选择器组{
动画：向前滑动750 1s；
}
}
@关键帧slideUp500{
0%{transform:translate3d（0500px，0）；}
100%{变换：translate3d（0,0,0）；}
}
@关键帧slideUp750{
0%{transform:translate3d（0750px，0）；}
100%{变换：translate3d（0,0,0）；}
}
这个问题已经问了很久了。但是我发现没有人回答我将给你的解决方案，在我看来，这比为不同的屏幕大小创建不同的
媒体查询
更容易

@myajouri建议您使用
固定
位置，您放弃了此解决方案，因为您需要使用3d变换来获得硬件加速。但您仍然可以使用具有固定位置的三维变换。使用
CSS
转换，如果使用百分比，它们将与元素本身的大小相关。这将允许您从屏幕外部移动元素，无论其大小如何，因此只需要一个关键帧动画。检查下一个代码段：


正文{
保证金：0；
填充：0；
}
.元素{
动画：slideUp 1s轻松输入输出无限交替；
背景：#CCC；
边框：5px纯灰；
框大小：边框框；
身高：100%；
位置：固定；
宽度：100%；
}
@关键帧滑动{
从{
转换：translate3d（0,100%，0）；
}
到{
变换：translate3d（0,0,0）；
}
}
如今，您可以使用本机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); }
  }
}

不幸的是，它需要在移动设备上快速运行，这意味着我需要使用3d转换来获得硬件加速。否则我会这么做的，我明白了。为此，我刚刚发布了另一个答案。它需要一些实验才能得到你想要的结果，但我希望你会发现它很有用。你有相对于父元素滑动的例子吗？似乎需要的不仅仅是
position:absolute
@Simon\u Weaver您主要还需要父级上的
position:relative
。这里有两种不同的方法来实现这一点（它可能会变得更复杂/更简单，取决于您的需要）：再看一看-我看到您在原始问题中确实提出了这一点，但在某些情况下，这可能是唯一让您不得不半复制代码的方法，“但是很管用。”凯尔·霍克花点时间去看看那些顶级网站的凌乱CSS。这会让你感觉更好：）@漂泊。CSS2.1是1998年的，所以现在已经很过时了。@Dai:删除了，谢谢你更新我。