How to make css line made from border to not disappear while animation of rotating? - Html

Darpek
March 30, 2023
108 views
3 votes
3 Answers

I want to create an animation of a curved line that moves like on an edge of egg shell from left to right. Here is what i’ve already done.

.box {
  width: 25px; 
  height: 100px;  
  border: solid 3px #000;
  border-color: transparent transparent transparent #000;
  border-radius: 50%/50px 0 0 50px;
  animation: animation 4s infinite;
}

@keyframes animation {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

and a simple div tag

<div class="box"></div>

The problem is that the border’s width is changing while rotating and completely dissapears when rotated by 90/270 degrees. How can i fix that?

jsfiddle

Answers

I think you want something like that.

.cube {
position: relative;
margin: 30vh 50vw;
transform-style: preserve-3d;
animation: animation 4s infinite;
}

@keyframes animation {
    0% {
    transform: rotateY(0deg)
    }
    50% {
    transform: rotateY(180deg);
    }
    100% {
    transform: rotateY(0deg);
    }
}
  

.face {
    position: absolute;
    background: #000;
  }
  
  .front {
    transform: translateZ(12.5px);
    width: 25px;
    height: 200px;
    background: red;
  }
  
  .back {
    transform: rotateY(180deg) translateZ(12.5px);
    width: 25px;
    height: 200px;
    background: orange;
  }
  
  .right {
    transform: rotateY(90deg) translateZ(12.5px);
    width: 25px;
    height: 200px;
    background:lime;

  }
  
  .left {
    transform: rotateY(-90deg) translateZ(12.5px);
    width: 25px;
    height: 200px;
    background:blueviolet;

  }
  
  .top {
    transform: rotateX(90deg) translateZ(100px);
    width: 25px;
    height: 200px;
  }
  
  .bottom {
    transform: rotateX(-90deg) translateZ(100px);
    width: 25px;
    height: 200px;
  }

  <div class="cube">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
  </div>

I think you have a good codebase now, which you can arrange as you want.

.cube {
position: relative;
margin: 30vh 50vw;
transform-style: preserve-3d;
animation: animation 10s infinite;
}


@keyframes animation {
    0% {
    transform: rotateY(0deg)
    }
    50% {
    transform: rotateY(180deg);
    }
    100% {
    transform: rotateY(0deg);
    }
}
  

.face {
    position: absolute;
    /* background: #000; */
  }
  
  .front {
    transform: translateZ(0px);
    width: 100px;
    height: 200px;
    /* background: red; */
    border-radius:50%;
    border-left:10px solid red;
  }

 .a{
  transform: translateZ(0px);
  border-left:5px solid red;
}
 .b{
  transform: translateZ(1px);
  border-left:5px solid red;
}
 .c{
  transform: translateZ(2px);
  border-left:5px solid red;
}
 .d{
  transform: translateZ(3px);
  border-left:5px solid red;
}
 .e{
  transform: translateZ(4px);
  border-left:5px solid red;
}
 .f{
  transform: translateZ(5px);
  border-left:5px solid red;
}
 .h{
  transform: translateZ(6px);
  border-left:5px solid red;
}

  <div class="cube">
    <div class="face front"></div>
    <div class="face front a"></div>
    <div class="face front b"></div>
    <div class="face front c"></div>
    <div class="face front d"></div>
    <div class="face front e"></div>
    <div class="face front f"></div>
    <div class="face front g"></div>
    <div class="face front h"></div>
  </div>

To make the HTML+CSS curved line animation you have no out-of-the-box, simple solution.

My suggestion would be to use canvas and program the object’s movement with javascript.

However, I made this snipped with elements that are resembling some smooth movement from one side to another.

main {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  position: relative;
  width: 350px;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: white;
}

span {
  box-sizing: border-box;
  display: inline-block;
  position: absolute;
  width: 50%;
  height: 100%;
  backface-visibility: hidden;
}

span.left-border {
  left: 0;
  border-radius: 100vw 0 0 100vw;
  transform-origin: right;
  background-color: black;
  animation: elastic-left linear 6s infinite;
}

span.left-cover {
  left: 2%;
  top: 2%;
  height: 96%;
  border-radius: 100vw 0 0 100vw;
  transform-origin: right;
  background-color: white;
  animation: elastic-left linear 6s infinite;
}

span.middle{
  width: 2%;
  left: 49%;
  background-color: black;
}

span.right-cover {
  left: 48%;
  top: 2%;
  background-color: white;
  border-radius: 0 100vw 100vw 0;
  height: 96%;
  transform-origin: left;
  animation: elastic-right linear 6s infinite;
}

span.right-border {
  left: 50%;
  border-radius: 0 100vw 100vw 0;
  transform-origin: left;
  background-color: black;
  animation: elastic-right linear 6s infinite;
}

@keyframes elastic-left {
  0% {
    transform: rotateY(180deg);
  }
  50% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(180deg);
  }
}

@keyframes elastic-right {
  0% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0);
  }
}

<main>
  <div class="card">
    <span class="middle"></span>
    <span class="left-border"></span>
    <span class="left-cover"></span>
    <span class="right-border"></span>
    <span class="right-cover"></span>
  </div>
</main>

The code could be improved so all of the valuable feedback is appreciated.

Please signup or login to give your own answer.

Click here to cancel reply.

How to make css line made from border to not disappear while animation of rotating? – Html

Answers