CSS3 过渡效果：从上向下移动元素

使用 CSS3 过渡实现从上向下距离顶部的高度变化，可以通过设置元素的 'top' 属性值来实现。具体步骤如下：

定义元素的初始状态，即设置元素的 'top' 属性值为 0，以确保元素初始状态在顶部位置。
定义元素的目标状态，即设置元素的 'top' 属性值为所需的高度值，如 100px，以实现从顶部向下移动的效果。
使用 CSS3 过渡属性 transition，设置元素的过渡时间和过渡方式，如下所示：

transition: top 0.5s ease-in-out;

触发状态变化，可以通过 JavaScript 或 CSS 伪类 :hover 等方式触发元素的状态变化，使其从初始状态向目标状态过渡。

完整示例代码如下：

HTML 代码：

<div class='box'></div>

CSS 代码：

.box {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  background-color: red;
  transition: top 0.5s ease-in-out;
}

.box:hover {
  top: 100px;
}

以上代码实现了一个红色正方形块，初始状态在顶部位置，鼠标悬停时从顶部向下移动 100px 的效果。其中，box 类设置元素的基本样式，包括宽高、背景色等；hover 伪类设置元素的目标状态，即 'top' 属性值为 100px，过渡效果使用了 ease-in-out 缓动函数，过渡时间为 0.5s。