Border is not arranging properly on CSS

user_7322512 0
Viewed 67

body{
    margin: 0;
    padding: 0;
    background-color: #073146;
}

.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 350px;
    height: 180px;
    background-color: #001e2d;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(0, 0, 0, 0.5);
}

.box::before{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.1);
    transition: 0.5s;
    pointer-events: none;
}

.box:hover:before{
    left: -50%;
    transform: skewX(-5deg);
}

/* this controls the text inside the box */
.box .content{   
   position: absolute;
   top: 15px;
   left: 15px;
   right: 15px;
   bottom: 15px;
   border: 2px solid #ffeb3b;
   padding: 30px;
   text-align: center;
   box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
}

.box .content h1{
    color: white;
    font-size: 30px;
    margin: 0 0 10px;
    padding: 0;
}

.box .content p{
    color: white;
}

.box span{
    position: absolute;
    top: 0;
    left: 0;
    width: 149%;
    height: 100%;
    display: block;
    box-sizing: border-box;
}

.box span:nth-child(1){
    transform: rotate(0deg);
}

.box span:nth-child(2){
    transform: rotate(90deg);
}
.box span:nth-child(3){
    transform: rotate(180deg);
}

.box span:nth-child(4){
    transform: rotate(270deg);
}

/* setting up one line */
.box span:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #0093ff;
    animation: animate 4s linear infinite;
}

@keyframes animate {
    0%{
        transform: scaleX(0);
        transform-origin: left;
    }
    50%{
        transform: scaleX(1);
        transform-origin: left;
    }
     50.1%{
        transform: scaleX(1);
        transform-origin: right;
    }
    100%{
        transform: scaleX(0);
        transform-origin: right;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">     
</head>
<body>
        <div class="box">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <div class="content">
                <h1>Some heaading</h1>
                <p>Three border is going perfect but the fourth border is messing up.</p>
            </div>
        </div>
</body>
</html>

I created this CSS but the problem with my CSS is I am not able to get all four borders on end. I am managed to get 3 borders but the fourth border does not seem to fit properly. I was wondering if someone can guide me on how to arrange all four borders blue color at the end of the card. Could some one please guide or help to get proper animation. I would really appreciate some help on this.

Thank you in advance

css-transitions css html
4 Answers

Use two animation effects, Because the width and height are different, changing the Angle of the animation line is not on the edge.

body{
    margin: 0;
    padding: 0;
    background-color: #073146;
}

.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 350px;
    height: 180px;
    background-color: #001e2d;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(0, 0, 0, 0.5);
}

.box::before{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.1);
    transition: 0.5s;
    pointer-events: none;
}

.box:hover:before{
    left: -50%;
    transform: skewX(-5deg);
}

/* this controls the text inside the box */
.box .content{   
   position: absolute;
   top: 15px;
   left: 15px;
   right: 15px;
   bottom: 15px;
   border: 2px solid #ffeb3b;
   padding: 30px;
   text-align: center;
   box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
}

.box .content h1{
    color: white;
    font-size: 30px;
    margin: 0 0 10px;
    padding: 0;
}

.box .content p{
    color: white;
}

.box span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
}


.box span:nth-child(3){
    transform: rotate(180deg);
}

.box span:nth-child(4){
    transform: rotate(180deg);
}

/* setting up one line */
.box span:nth-child(odd):before{
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #0093ff;
    animation: animate 4s linear infinite;
}

.box span:nth-child(even):before{
    content: '';
    position: absolute;
    height: 100%;
    width: 2px;
    background-color: #0093ff;
    animation: animate2 4s linear infinite;
}

@keyframes animate {
    0%{
        transform: scaleX(0);
        transform-origin: left;
    }
    50%{
        transform: scaleX(1);
        transform-origin: left;
    }
     50.1%{
        transform: scaleX(1);
        transform-origin: right;
    }
    100%{
        transform: scaleX(0);
        transform-origin: right;
    }
}

@keyframes animate2 {
    0%{
        transform: scaleY(0);
        transform-origin: bottom;
    }
    50%{
        transform: scaleY(1);
        transform-origin: bottom;
    }
     50.1%{
        transform: scaleY(1);
        transform-origin: top;
    }
    100%{
        transform: scaleY(0);
        transform-origin: top;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">     
</head>
<body>
        <div class="box">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <div class="content">
                <h1>Some heaading</h1>
                <p>Three border is going perfect but the fourth border is messing up.</p>
            </div>
        </div>
</body>
</html>

user_125983780 
    .box span:nth-child(2){
    transform: rotate(90deg);
    right: -170px;
    left: auto;
}.box span:nth-child(2){
    transform: rotate(90deg);
    right: -170px;
    left: auto;
}
.box span:nth-child(3){
    transform: rotate(180deg);
}

.box span:nth-child(4){
    transform: rotate(270deg);
    left: -170px;
}

I dont know if this is right or there is any other proper solution but this work for me. Thank you to the commentor to direct me in proper direction. I appreciate it

user_73225120

You need to set the width: property to the animation's full width underneath .box span, and then set its second and fourth nth-child's right: and left properties. Something like:

body {
  margin: 0;
  padding: 0;
  background-color: #073146;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 180px;
  background-color: #001e2d;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(0, 0, 0, 0.5);
}

.box::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  transition: 0.5s;
  pointer-events: none;
}

.box:hover:before {
  left: -50%;
  transform: skewX(-5deg);
}

/* this controls the text inside the box */
.box .content {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 2px solid #ffeb3b;
  padding: 30px;
  text-align: center;
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
}

.box .content h1 {
  color: white;
  font-size: 30px;
  margin: 0 0 10px;
  padding: 0;
}

.box .content p {
  color: white;
}

.box span {
  position: absolute;
  top: 0;
  left: 0;
  width: 350px;
  height: 100%;
  display: block;
  box-sizing: border-box;
}

.box span:nth-child(1) {
  transform: rotate(0deg);
}

.box span:nth-child(2) {
  transform: rotate(90deg);
  right: -87px;
  left: auto;
}

.box span:nth-child(3) {
  transform: rotate(180deg);
}

.box span:nth-child(4) {
  transform: rotate(270deg);
  left: -87px;
  right: auto;
}

/* setting up one line */
.box span::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #0093ff;
  animation: animate 4s linear infinite;
}

@keyframes animate {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }

  50% {
    transform: scaleX(1);
    transform-origin: left;
  }

  50.1% {
    transform: scaleX(1);
    transform-origin: right;
  }

  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
  </head>

  <body>
    <div class="box">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <div class="content">
        <h1>Some heaading</h1>
        <p>Three border is going perfect but the fourth border is messing up.</p>
      </div>
    </div>
  </body>

</html>

user_134303810

Here is a simplified version where you will need few lines of code. The whole animation can be done using background without extra elements:

body {
  margin: 0;
  background-color: #073146;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  background:
    linear-gradient(#0093ff 0 0) 0 0,
    linear-gradient(#0093ff 0 0) 100% 0,
    linear-gradient(#0093ff 0 0) 100% 100%,
    linear-gradient(#0093ff 0 0) 0 100%;
  background-size:100% 2px,2px 100%;
  background-repeat:no-repeat;
  background-color: #001e2d;
  box-sizing: border-box;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(0, 0, 0, 0.5);
  overflow:hidden;
  animation:animate 2s linear infinite;
}

@keyframes animate{
   from {
      background-size:0% 2px,2px 0%;
      background-position:0 0,100% 0,100% 100%,0 100%;
   }
   50% {
      background-size:100% 2px,2px 100%;
      background-position:0 0,100% 0,100% 100%,0 100%;
   }
   50.1% {
      background-size:100% 2px,2px 100%;
      background-position:100% 0,100% 100%,0 100%,0 0;
   }
   100% {
      background-size:0% 2px,2px 0%;
      background-position:100% 0,100% 100%,0 100%,0 0;
   }
}

.box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  transition: 0.5s;
  pointer-events: none;
  transform-origin:top;
}

.box:hover:before {
  width:50%;
  transform: skewX(-5deg);
}

.box .content {
  margin:15px;
  border: 2px solid #ffeb3b;
  padding: 30px;
  text-align: center;
  color: white;
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
}

.box .content h1 {
  font-size: 30px;
  margin: 0 0 10px;
}
<div class="box">
  <div class="content">
    <h1>Some heaading</h1>
    <p>Three border is going perfect but the fourth border is messing up.</p>
  </div>
</div>

Related question with a similar effect: Drawing border colors during a CSS transition

user_86203330
Related