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，形成一种从上向下的动画效果