How to animate border so that it displays slowly that it shows by starting from start to finish-CodePudding

I want to animate the border and shows it slowly, I want something like https://codepen.io/Mamboleoo/pen/zYOJOGb not like removing the old line but it needs to be shown something like that, and the color should not be neon just plain border, and it should be animated only once should not be repeated, load it once and done.

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.

CodePudding user response：

A way of making the border of an element looking animated is to gradually unveil the borders in turn by gradually shrinking a 5px wide (or high depending on which border) 100% wide element that is overlaying each border.

This snippet does this by animating the after pseudo element on the element and at the same time putting one border after another into the required final color.

You can put the class movingBorder from this snippet onto other elements to get the moving border effect.

.movingBorder {
  width: 60vw;
  height: 60vh;
  border: solid 5px lime;
  position: relative;
  background: pink;
  animation: changeBorders 5s linear;
}

@keyframes changeBorders {
  0% {
    border: solid 5px white;
    border-left: solid 5px lime;
  }
  25% {
    border: solid 5px white;
    border-left: solid 5px lime;
  }
  25.02% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
  }
  50% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
  }
  50.02% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
    border-right: solid 5px lime;
  }
  75% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
    border-right: solid 5px lime;
  }
  75.02% {
    border: solid 5px lime;
  }
}

.movingBorder::after {
  width: 5px;
  background-color: white;
  height: 0px;
  position: absolute;
  bottom: 0;
  left: -5px;
  z-index: 1;
  animation: movedown 5s linear;
  animation-fill-mode: forwards;
  content: '';
  display: inline-block;
}

@keyframes movedown {
  0% {
    height: calc(100%   10px);
    width: 5px;
    bottom: -5px;
    left: -5px;
  }
  25% {
    height: 5px;
    width: 5px;
    bottom: -5px;
    left: -5px;
  }
  25.01% {
    height: 5px;
    width: calc(100%   10px);
    bottom: -5px;
    left: -5px;
  }
  50% {
    height: 5px;
    width: 0%;
    left: 100%;
    bottom: -5px;
  }
  50.01% {
    height: calc(100%   10px);
    width: 5px;
    left: 100%;
    bottom: -5px;
  }
  75% {
    height: 0;
    width: 5px;
    left: 100%;
    bottom: 100%;
  }
  75.01% {
    height: 5px;
    width: calc(100%   10px);
    left: 0%;
    bottom: 100%;
  }
  99.01% {
    height: 5px;
    width: 0;
    left: 0;
    bottom: 100%;
  }
}

<div class="movingBorder" style="background: pink; width: 60vw; height: 60vh;"></div>

CodePudding user response：

You could "trick" the effect if your background-color is going to be white or solid color.

Just put a box above the element with the border slightly wider and higher, then make the animation to move this element away.

Like this:

* {box-sizing:border-box;}
.parent {
  border:4px solid red;
  height:200px;
  border-radius:100px;
  position:relative;
}
.text {
  width:80%;
  margin:0 auto;
  position:relative;
  top:50%;
  transform:translateY(-50%);
}
.div1 {
  position:absolute;
  background-color:#fff;
  border:4px solid #fff;
  height:calc(100%   20px);
  width:calc(100%   20px);
  top:calc(0% - 10px);
  left:calc(0% - 10px);
  animation-name: border;
  animation-duration: 5s;
  animation-fill-mode:forwards;
}
@keyframes border {
  0% {
    left:calc(0% - 10px);
  }
  100% {
    left:calc(100%   10px );
  }
}

<div class="parent"> 
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget ligula dictum, malesuada tortor vel, gravida velit. Pellentesque eget gravida quam. Nam sit amet massa aliquet, auctor libero dapibus, vehicula nunc. Sed ullamcorper, est id luctus facilisis, velit nibh semper nibh, ac tempus arcu velit ac metus. Donec ultricies ex id pellentesque ultrices. Vivamus rutrum, nulla quis bibendum fringilla, augue massa facilisis ipsum, id facilisis metus nisi nec eros.</div>
   <div class="div1"></div>
</div>

You can move the div containing the text below the other div (div1) if you want the text not to be included in the animation.