CODEWITHSUNDEEP
javascriptcss
Arun Bohra
Arun Bohra

Reputation: 547

Make a shape and animate it in JavaScript or CSS

I want to create a L shape with lines (div element). I also want to animate it. The problem is that when I try to rotate it (using transform rotate), the whole line gets rotated. How do I get it done? Can anyone help? Below is the code snippet. How do I make it a L.

.line {
  width: 100px;
  background: #ff0000;
  animation: animate-line 2s;
  height: 2px;
}

@keyframes animate-line {
    0% {
        width: 50px;
    }
  
    100% {
        width: 300px;
    }
}
<div class="line"></div>

Upvotes: 1

Views: 193

Answers (1)

Justin
Justin

Reputation: 2958

Simply without using JS or an SVG image you can animate the elements width and height and use borders

.line {
  position: absolute;
  width: 0px;
  height: 0px;
  background: transprent;
  border-top: 2px solid red;
  border-right: 2px solid red;
  animation: animate-line 2s linear forwards;
}

@keyframes animate-line {
  0% {
    width: 50px;
    height: 0px;
  }

  50% {
    width: 300px;
    height: 0px;
  }

  100% {
    width: 300px;
    height: 300px;
  }
}
<div class="line"></div>

If that isn't what you wanted please provide an image with an example.

Upvotes: 1

Related Questions