HiDocs

html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /*
      transform-style: preserve-3d;：这个属性用于指定如何对一个元素及其子元素应用3D变换。当设置为"preserve-3d"时，表示元素及其子元素应被视为3D对象，保留它们的3D位置和方向。

      animation-iteration-count: 1;：这个属性指定动画应该运行多少次。在这里，它被设置为"1"，意味着动画只会运行一次。

      animation-duration: 500ms;：这个属性定义了动画的持续时间，单位是毫秒。在这里，它被设置为500毫秒（半秒），所以动画将需要半秒的时间来完成。

      animation-delay: 0ms;：这个属性确定动画开始前的延迟时间。它被设置为0毫秒，所以动画会立即开始。

      animation-timing-function: linear;：这个属性指定动画过程中使用的时间函数。"linear"表示动画将在时间上均匀进行，没有加速或减速。

      animation-fill-mode: forwards;：这个属性确定动画前后应用到元素的值。"forwards"表示动画完成后将应用最终的关键帧值到元素。

      animation-name: animation_recovery__3O8yj;：这个属性指定应用到元素的动画的名称。在这种情况下，它引用了一个名为"animation_recovery__3O8yj"的动画。
    */
    .ani {
      transform-style: preserve-3d;
      animation-iteration-count: 1;
      animation-duration: 1000ms;
      animation-delay: 0ms;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
      animation-name: animation_recovery__3O8yj;
    }

    @keyframes animation_recovery__3O8yj {
      0% {
        opacity: 0;
        transform: translateY(50px);
      }

      25% {
        opacity: 0.25;
        transform: translateY(30px);
      }

      75% {
        opacity: 0.75;
        transform: translateY(10px);
      }

      100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
      }
    }

    .box {
      width: 500px;
      height: 1.5em;
      border: 1px #e8604c solid;
      position: relative;
      top: 200px;
      left: 200px;
    }
  </style>
</head>

<body>
  <div class="ani box">绿盟科技-巨人背后的专家</div>
</body>

</html>
实现的效果：
从起始位置向上移动，逐渐由透明变不透明！