How to animate border so that it displays slowly from start to finish

I want to animate a border and show it slowly, something like this Codepen, with some differences:

• Not removing the old line but it needs to be shown something like that.

• The color should not be neon just plain border

• It should be animated only once without repetition.

A simple chunk of code looks like this

<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>

But to take a detail look please check this jsfiddle link https://jsfiddle.net/ah0rokpj/1/ Please, view this jsfiddle in full view or in higher screen size, else it won't be shown. I want that lime border to be animated.

I want this to be animated as in image.

from How to animate border so that it displays slowly from start to finish