CODEWITHSUNDEEP
cssanimation
Bogdan Florin
Bogdan Florin

Reputation: 103

animate a diagonal line in css

I'd like to create an animation that makes a diagonal line to grow, from width:0, to width:400px, and it starts from left ( bottom left ) to right ( top right ). I know how to do this, but with a horizontal line ( with keyframes, 0% { width:0px; } 100% { width:400px; } ), but when it comes to transform that line into a diagonal line, at the start of the animation, it also changes it's position. Any ideas? Thank you!

Upvotes: 3

Views: 3948

Answers (1)

Temani Afif
Temani Afif

Reputation: 273031

You can try this:

.line {
  height:10px;
  width:0;
  margin-top:100px;
  background:red;
  transform:rotate(-45deg);
  transform-origin:left;
  animation:grow 1s linear forwards;
}
@keyframes grow{
  to {width:100px;}
}
<div class="line"></div>

Upvotes: 2

Related Questions