CSS: 使用 transform translate 而不是 bottom

Question

我正在尝试更改按钮的关键帧动画，该按钮将某些内容从 div 的底部移动到顶部。当我使用 bottom 制作动画时：

@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。因此，为了获得与 bottom 相同的行为，我需要指定非常高的 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 的高度进行操作的变换属性来操纵子 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>

CSS: 使用 transform translate 而不是 bottom

CSS: Using transform translate instead of bottom

css

css-transforms

css-animations