CSS：使用变换翻译而不是底部

Question

我正在尝试更改一个按钮的关键帧动画，该按钮将某些内容从 div 的底部移动到顶部。当我使用底部对其进行动画处理时：

@keyframes moveUpWithFade2 {
    from {
        bottom: 0%;
        opacity: 0;
    }
    10% {
        opacity: 1;  
    }
    50% {
        opacity: 1;
    }
    to {
        bottom: 100%;
        opacity: 0;
    }
}

它正确地从父 div 的底部淡入到最顶部。但是，如果我使用 transform:translateY(100%) 它会在我试图设置动画的 div 的维度上运行。因此，如果我有一个高度为 25px 的矩形，那么它将向上移动 25px。因此，为了获得与底部相同的行为，我需要指定非常高的 translateY 值，如下所示：

@keyframes moveUpWithFade {
    from {
        transform: translateY(0%);
        opacity: 0;
    }
    10% {
        transform:  translateY(-200%);
        opacity: 1;  
    }
    50% {
        transform:  translateY(-1000%);
        opacity: 1;
    }
    to {
        transform: translateY(-2000%);
        opacity: 0;
    }
}

JSFiddle link

.parent {
  width: 25px;
  height: 400px;
}

.rect {
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: skyblue;
}

.movingDiv {    
    bottom: 0;
    animation: moveUpWithFade 6s linear infinite forwards, animateX 2s ease-in-out 3 alternate;
    overflow: hidden;
}

@keyframes moveUpWithFade {
    from {
        transform: translateY(0%);
        opacity: 0;
    }
    10% {
        transform:  translateY(-200%);
        opacity: 1;  
    }
    50% {
        transform:  translateY(-1000%);
        opacity: 1;
    }
    to {
        transform: translateY(-2000%);
        opacity: 0;
    }
}

@keyframes moveUpWithFade2 {
    from {
        bottom: 0%;
        opacity: 0;
    }
    10% {
        opacity: 1;  
    }
    50% {
        opacity: 1;
    }
    to {
        bottom: 100%;
        opacity: 0;
    }
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY -->

<div class="parent">
<div class="rect movingDiv">Moving</div>
</div>

在我的情况下，我向上或向下移动的对象的大小是可变的，而不是硬编码的。有没有办法可以使用对父 div 的高度进行操作的 transform 属性来操作子 div？

Answer 1

考虑一个额外的元素，您将在其中应用变换动画并使其与父元素高度相同：

.parent {
  width: 25px;
  height: 300px;
  border: 2px solid;
  overflow:hidden;
}

.rect {
  width: 25px;
  height: 25px;
  background-color: skyblue;
  transform:translateY(-100%);
}

.movingDiv {
  height:100%;
  animation: moveUpWithFade 6s linear infinite;
}

@keyframes moveUpWithFade {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  10% {
    transform: translateY(80%);
    opacity: 1;
  }
  50% {
    transform: translateY(30%);
    opacity: 1;
  }
  to {
    transform: translateY(0%);
    opacity: 0;
  }
}

<div class="parent">
  <div class="movingDiv">
    <div class="rect ">Moving</div>
  </div>
</div>