我想动画边框并缓慢显示，类似于此代码，有一些不同:

• 不删除旧行，但需要显示类似的内容。

• 颜色不应该是霓虹灯，只是普通边框

• 它应该只动画一次而不重复。

一个简单的代码块如下所示

<div class="boxes">
  <div class="row">
    <div
      class="col-lg-6"
      data-aos="zoom-in-right"
      data-aos-duration="800"
    >
      <div class="right-box left">
        <h2>Heading1.</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Nulla in erat et quam semper convallis. Phasellus vel nisl
          id leo suscipit molestie. Sed nec dignissim urna. Donec
          sit amet tortor nulla. Etiam tempus dui id ipsum commodo,
          et laoreet tortor luctus. Ut dapibus.
        </p>
      </div>
    </div>
    <div
      class="col-lg-6"
      data-aos="zoom-in-left"
      data-aos-duration="800"
    >
      <div class="left-box">
        <img
          src="https://via.placeholder.com/650x430"
          class="img-fluid"
          alt=""
        />
      </div>
    </div>
  </div>
</div>

但要查看详细信息，请检查此jsfiddle链接https://jsfiddle.net/ah0rokpj/1/请以全视图或更大屏幕尺寸查看此jsfiddle否则将不会显示。我希望将石灰边框设置为动画。

我希望它像在图像中一样动画。

---

顺晟科技：

使元素的边框看起来生动的一种方法是通过逐渐缩小覆盖每个边框的5px宽（或更高（取决于哪个边框）的100%宽的元素来依次逐渐揭开边框。

此代码段通过将元素上的after伪元素动画化，同时将一个接一个边框设置为所需的最终颜色来实现这一目的。

可以将此代码段中的类movingBorder放到其他元素上，以获得移动边框效果。

update:上面的方法适用于正方形边框，但需要设置半径的边框。这个片段将after元素放在边框上（位于before伪元素上），该元素最初具有以下形状:

它逐渐向左移动，露出石灰边界的顶部。然后左部分设置为透明，伪元素向右移动，逐渐显示边框的底部。

注意：在整页中运行此代码片段以查看效果。动画会延迟10秒，所以您有时间这样做（否则动画在您到达之前就已经完成了）。

显然，当文本位于图像右侧时，必须添加等效的CSS。

如果背景颜色是白色或纯色，则可以“欺骗”效果。

只需在元素上方放一个框，边框略宽且稍高，然后制作动画将该元素移开。

如下所示:

如果不希望动画中包含文本，则可以将包含文本的内容移到其他div下面。