animate a diagonal line in css

user_10096562 0
Viewed 2831

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!

animation css
1 Answers

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>

user_86203330
Related