CSS3 动画：实现元素从上向下移动 | 距离顶部高度

可以使用 position 和 top 属性来实现从上向下距离顶部的高度。

例如，假设需要让一个元素从距离顶部 100px 的位置向下移动 50px，可以使用以下 CSS 样式：

.element {
  position: relative;
  top: 100px;
  animation-name: move-down;
  animation-duration: 2s;
}

@keyframes move-down {
  0% {
    top: 100px;
  }
  100% {
    top: 150px;
  }
}

在上面的样式中，.element 元素首先通过 position: relative 属性设置为相对定位。然后，top 属性设置为 100px，将元素从顶部向下移动 100px 的高度。接着，animation-name 和 animation-duration 属性定义了一个名为 move-down 的动画，持续时间为 2 秒。

在 @keyframes 规则中，使用 0% 和 100% 关键帧来定义动画的起始和结束状态。在起始状态下，元素的 top 属性设置为 100px，即原始位置。在结束状态下，元素的 top 属性设置为 150px，即向下移动 50px 的新位置。

当应用这些样式时，元素将从距离顶部 100px 的位置向下移动 50px，形成一种从上向下的动画效果。