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

无论屏幕或元素高度如何，执行上滑动画的方法是使用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 3

如果您必须使用translate3d在移动设备上获得硬件加速（如您所述），并且您无法在@media内使用at-rules：

您可以定义一个@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 4

问这个问题以来已经很长时间了。但是我看到没有人能回答我提供给您的解决方案，而我认为，这比为不同的屏幕尺寸创建不同的media-queries更容易。

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

body {
  margin: 0;
  padding: 0;
}

.element {
  animation: slideUp 1s ease-in-out infinite alternate;
  background: #CCC;
  border: 5px solid gray;
  box-sizing: border-box;
  height: 100%;
  position: fixed;
  width: 100%;
}

@keyframes slideUp {
  from {
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

<div class="element" />

Answer 5

现在你可以使用原生 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); }
  }
}

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

5 个答案: