Css Help Required For Border Animation

Here is my code: Here, I am trying to do border animation by covering up the border with a layer and then moving that layer in a specific way so that the border shows up slowly an

Solution 1:

When animating the right hand side border we need to swap the 'mask' that is being moved over it around, so that the part that covers the whole border is to the right and the shorter part that covers just the bottom half is to the left.

In doing that we also have to change positioning and transitions to match.

.section-one {
  position: relative;
  background: #ffffff;
}

.section-oneh2 {
  color: #000000;
  font-size: 32px;
  margin: 0px0px10px0px;
  padding: 0px;
  font-family: "AzoSans-Medium";
}

.section-onep {
  color: #000000;
  font-size: 16px;
  margin: 10px0px;
  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: 25px0px0px0px;
  z-index: 3;
}

.section-one.boxes.left-boximg {
  width: 100%;
}

.section-one.boxes.right-box {
  position: relative;
  margin: 25px0px0px0px;
  height: 100%;
  z-index: 2;
}

.section-one.boxes.right-box.left:before,
.section-one.boxes.right-box.left::after {
  left: 0px;
  right: -30px;
}

.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;
}

.section-one.boxes.right-box:before {
  border: 1px solid #f29d1f;
}

.section-one.boxes.right-box.lefth2 {
  text-align: left;
}


/**updated starts**/.section-one.boxes.right-box.left:before {
  left: 0px;
  right: -30px;
}

.section-one.boxes.right-box.left::after {
  right: 0px;
  /* turned round */left: -30px;
}

.section-one.boxes.right-box.left:before {
  /* left: 0px;
      right: -30px; */border-right: none;
  border-radius: 250px0px0px250px;
}


/**updated ends**//** purely new code starts**/.section-one.boxes.right-box::after {
  width: 200%;
  height: 100%;
}

.section-one.boxes.right-box.left::after {
  background-position: 00, 100%75%;
  background-size: calc(50% + 30px) 100%, 50%50%;
  background-repeat: no-repeat no-repeat, no-repeat no-repeat;
  background-image: linear-gradient(red, red), linear-gradient(red, red);
  animation: left 1s ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 1s;
  /* just to give time to go full screen on SO snippet! */
}

@keyframes left {
  0% {
    background-image: linear-gradient(red, red), linear-gradient(red, red);
    transform: translateX(0);
  }
  49.99% {
    background-image: linear-gradient(red, red), linear-gradient(red, red);
  }
  50% {
    background-image: linear-gradient(transparent, transparent), linear-gradient(red, red);
    transform: translateX(-50%);
  }
  99.99% {
    background-image: linear-gradient(transparent, transparent), linear-gradient(red, red);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/** purely new code ends**/.section-one.boxes.right-box.righth2 {
  text-align: right;
}

.section-one.boxes.right-box.right:before {
  border-left: none;
  border-radius: 0px250px250px0px;
}


/* probably code where to look starts */.section-one.boxes.right-box.right::after {
  padding: 0;
  margin: 0;
  width: calc(200% + 60px);
  left: -30px;
  transform: translateX(-50%);
  background-position: 075%, right 0;
  /* turned round */background-size: 50%50%, 50%100%;
  /* turned round */background-repeat: no-repeat no-repeat, no-repeat no-repeat;
  background-image: linear-gradient(white, white), linear-gradient(white, white);
  animation: right 5s ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 5s;
}

@keyframes right {
  0% {
    background-image: linear-gradient(white, white), linear-gradient(white, white);
    transform: translateX(-50%);
  }
  49.99% {
    background-image: linear-gradient(white, white), linear-gradient(white, white);
  }
  50% {
    background-image: linear-gradient(white, white), linear-gradient(transparent, transparent);
    /* turned round */transform: translateX(0px);
  }
  99.99% {
    background-image: linear-gradient(white, white), linear-gradient(transparent, transparent);
    /* turned round */transform: translateX(-50%);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/* probably code where to look ends */.section-one.boxes.right-boxh2 {
  padding: 50px0px20px0px;
}

.section-one.boxes.right-boxp {
  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-oneh2 {
    font-size: 28px;
  }
  .section-onep {
    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.lefth2 {
    text-align: left;
  }
  .section-one.boxes.right-box.left:before {
    border-radius: 200px0px0px200px;
  }
  .section-one.boxes.right-box.righth2 {
    text-align: left;
  }
  .section-one.boxes.right-box.right:before {
    border-radius: 0px200px200px0px;
  }
  .section-one.boxes.right-boxh2 {
    padding: 50px0px15px0px;
  }
  .section-one.boxes.right-boxp {
    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-oneh2 {
    font-size: 25px;
  }
  .section-one.boxes {
    position: relative;
    margin-top: 10px;
  }
  .section-one.boxes:last-child {
    margin-bottom: 30px;
  }
  .section-one.boxes.right-box.left:before {
    left: 0px;
    right: -15px;
    border-right: none;
    border-radius: 100px0px0px100px;
  }
  .section-one.boxes.right-boxh2 {
    padding: 0px0px15px0px;
    margin: 0px;
  }
  .section-one.boxes.right-boxp {
    display: block;
    margin: 0px auto 15px auto;
    padding: 0px15px30px30px;
    width: 100%;
    max-width: 100%;
    text-align: justify;
  }
  .section-one.boxes.action-btn {
    position: relative;
    text-align: right;
  }
}

<linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><sectionclass="section-one"><divclass="container"><divclass="row"><divclass="col-lg-12"><divclass="boxes"><divclass="row"><divclass="col-lg-6 aos-init"data-aos="zoom-in-right"data-aos-duration="800"><divclass="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><divclass="col-lg-6 aos-init"data-aos="zoom-in-left"data-aos-duration="800"><divclass="left-box"><imgsrc="https://via.placeholder.com/650x430"class="img-fluid"alt=""></div></div></div></div><divclass="boxes"><divclass="row flex-row-reverse"><divclass="col-lg-6"data-aos="zoom-in"data-aos-duration="800"><divclass="right-box right"><h2>Heading 2.</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><divclass="col-lg-6"data-aos="zoom-in"data-aos-duration="800"><divclass="left-box"><imgsrc="https://via.placeholder.com/650x430"class="img-fluid"alt=""></div></div></div></div></div></div></div></section><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>animation