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>
UPDATE: the above works for a square border but the requirement was for a border with radius set. This snippet puts an after element over the border (which is on the before pseudo element) which has this shape initially:

This moves left gradually revealing the top part of the lime border. Then the left part is set to transparent and the pseudo element moved right, gradually revealing the bottom part of the border.
NOTE: run this snippet in Full page to see the effect. The animation delays for 10 seconds so you have time to do that (otherwise the animation has finished before you've got there).
* {
margin: 0px;
padding: 0px;
list-style: none;
border: none;
text-decoration: none;
outline: none;
}
::-webkit-input-placeholder {
color: inherit;
opacity: 1;
}
:-ms-input-placeholder {
color: inherit;
opacity: 1;
}
::placeholder {
color: inherit;
opacity: 1;
}
html,
body {
height: 100%;
}
.col-lg- {}
.col-md- {}
.col-sm- {}
.col- {}
.img-fluid {}
.container-fluid {}
.justify-content-center {}
.row {}
.my-auto {}
.p0 {}
.container {
width: 100%;
max-width: 1170px;
}
.container-fluid {
width: 100%;
max-width: 1440px;
}
@media (max-width: 1199px) {
.container {
width: 100%;
max-width: 100%;
}
}
/*** ### Section One ### ***/
.section-one {
position: relative;
background: #ffffff;
}
.section-one h2 {
color: #000000;
font-size: 32px;
margin: 0px 0px 10px 0px;
padding: 0px;
font-family: "AzoSans-Medium";
}
.section-one p {
color: #000000;
font-size: 16px;
margin: 10px 0px;
padding: 0px;
font-family: "AzoSans-Regular";
}
.section-one .boxes {
position: relative;
margin-top: 75px;
}
.section-one .boxes:last-child {
margin-bottom: 100px;
}
.section-one .boxes .left-box {
position: relative;
margin: 25px 0px 0px 0px;
z-index: 3;
}
.section-one .boxes .left-box img {
width: 100%;
}
.section-one .boxes .right-box {
position: relative;
margin: 25px 0px 0px 0px;
height: 100%;
z-index: 2;
}
.section-one .boxes .right-box:before,
.section-one .boxes .right-box::after {
position: absolute;
content: "";
top: 50px;
left: -30px;
right: 0px;
bottom: 25px;
z-index: -2;
/* so we can have another pseudo element overlaying it */
}
.section-one .boxes .right-box:before {
border: 1px solid lime;
}
.section-one .boxes .right-box.left h2 {
text-align: left;
}
.section-one .boxes .right-box.left:before,
.section-one .boxes .right-box.left::after {
left: 0px;
right: -30px;
}
.section-one .boxes .right-box.left:before {
border-right: none;
border-radius: 250px 0px 0px 250px;
}
.section-one .boxes .right-box::after {
width: 200%;
height: 100%;
}
.section-one .boxes .right-box.left::after {
background-position: 0 0, 100% 75%;
background-size: calc(50% + 30px) 100%, 50% 50%;
background-repeat: no-repeat no-repeat, no-repeat no-repeat;
background-image: linear-gradient(white, white), linear-gradient(white, white);
animation: left 10s ease-in-out;
animation-fill-mode: forwards;
animation-delay: 10s;
/* just to give time to go full screen on SO snippet! */
}
@keyframes left {
0% {
background-image: linear-gradient(white, white), linear-gradient(white, white);
transform: translateX(0);
}
49.99% {
background-image: linear-gradient(white, white), linear-gradient(white, white);
}
50% {
background-image: linear-gradient(transparent, transparent), linear-gradient(white, white);
transform: translateX(-50%);
}
99.99% {
background-image: linear-gradient(transparent, transparent), linear-gradient(white, white);
transform: translateX(0);
opacity: 1;
}
100% {
opacity: 0;
}
}
.section-one .boxes .right-box.right h2 {
text-align: right;
}
.section-one .boxes .right-box.right:before {
border-left: none;
border-radius: 0px 250px 250px 0px;
}
.section-one .boxes .right-box h2 {
padding: 50px 0px 20px 0px;
}
.section-one .boxes .right-box p {
display: block;
margin: 15px auto;
width: 100%;
max-width: 355px;
text-align: justify;
}
.section-one .boxes .action-btn {
position: relative;
text-align: right;
}
@media (max-width: 1199px) {
.section-one h2 {
font-size: 28px;
}
.section-one p {
font-size: 15px;
}
.section-one .boxes {
position: relative;
margin-top: 50px;
}
.section-one .boxes:last-child {
margin-bottom: 75px;
}
.section-one .boxes .right-box:before {
left: -30px;
}
.section-one .boxes .right-box.left h2 {
text-align: left;
}
.section-one .boxes .right-box.left:before {
border-radius: 200px 0px 0px 200px;
}
.section-one .boxes .right-box.right h2 {
text-align: left;
}
.section-one .boxes .right-box.right:before {
border-radius: 0px 200px 200px 0px;
}
.section-one .boxes .right-box h2 {
padding: 50px 0px 15px 0px;
}
.section-one .boxes .right-box p {
display: block;
margin: 15px auto;
width: 100%;
max-width: 355px;
text-align: justify;
}
.section-one .boxes .action-btn {
position: relative;
text-align: right;
}
}
@media (max-width: 991px) {
.section-one h2 {
font-size: 25px;
}
.section-one .boxes {
position: relative;
margin-top: 10px;
}
.section-one .boxes:last-child {
margin-bottom: 30px;
}
.section-one .boxes .right-box:before {
display: none;
}
.section-one .boxes .right-box.right:before {
display: none;
}
.section-one .boxes .right-box h2 {
padding: 0px 0px 15px 0px;
margin: 0px;
}
.section-one .boxes .right-box p {
display: block;
margin: 0px auto 15px auto;
width: 100%;
max-width: 100%;
text-align: justify;
}
.section-one .boxes .action-btn {
position: relative;
text-align: right;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<section class="section-one">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="boxes">
<div class="row">
<div class="col-lg-6 aos-init" 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 aos-init" 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>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Obviously equivalent CSS has to be added for when the text is to the right of the image.