Question 184205 in Html Question posted in
Some basic documentation can be found here.

Html – How to animate diagonal lines growing without rotation in CSS?

I’m working on an animation where I want diagonal lines to grow from their initial height of 0% to 100%, without any rotation. Currently, I have the following CSS code:

HTML

<div class="stripes-1">
         <span class="rec-1"></span>
         <span class="rec-1"></span>
         <span class="rec-1"></span>
         <span class="rec-1"></span>
      </div>

CSS

.who-we-are {
  height: 100vh;
  margin: auto;
  padding: auto;
}

.stripes-1 {
  display: flex;
  flex-direction: column;
}

.rec-1 {
  transform: scaleX(100%) rotate(40deg);
  animation: expandHeight 1s ease-in-out forwards;
  width: 72.5%;
  margin: 1rem 0;
  animation: appearUp 1.5s linear;
  transition: ease-in ;
  position: relative;
  left: 500px;
  top: 350px;
}

@keyframes appearUp{
  0%{
    transform:scaleX(0) rotate(0deg);
  } 
  100%{
    transform: scaleX(100%) rotate(40deg);
  } 
    
    
}

.rec-1:nth-of-type(1){
  border-bottom: 30px solid #1DCDFE;
}

.rec-1:nth-of-type(2) {
    border-bottom: 30px solid #11FFC4;
}

.rec-1:nth-of-type(3) {
    border-bottom: 30px solid #21D0B2;
}

.rec-1:nth-of-type(4) {
    border-bottom: 30px solid #2F455C;
}

The issue is that the lines not only grow but also rotate during the animation. However, I want them to maintain their initial angle of 40 degrees and grow vertically. I’ve tried adjusting the transform-origin property and adding separate animations, but I couldn’t achieve the desired result.

Could someone please guide me on how to modify the CSS animation to make the lines grow from the initial angle of 40 degrees without rotation?

Updated HTML and CSS

Tags:

3

Answers


  1. 0

    This transform: scaleX(100%) rotate(40deg); and this transform: rotate(40deg) scaleX(100%); – it is not the same thing.

    body {
  display: grid;
  min-height: 100vh;
  align-items: end;
  overflow: hidden;
  margin: 0;
}

.rec-1 {
  transform-origin: right bottom;
  margin: 1rem 0;
  animation: appearUp 1.5s linear both;
  transform: rotate(40deg) scaleX(0);
}

@keyframes appearUp {
  to {
    transform: rotate(40deg) scaleX(100%);
  }
}

.rec-1:nth-of-type(1) {
  border-bottom: 30px solid #1DCDFE;
}

.rec-1:nth-of-type(2) {
  border-bottom: 30px solid #11FFC4;
}

.rec-1:nth-of-type(3) {
  border-bottom: 30px solid #21D0B2;
}

.rec-1:nth-of-type(4) {
  border-bottom: 30px solid #2F455C;
}
    <div class="rec-1"></div>
<div class="rec-1"></div>
<div class="rec-1"></div>
<div class="rec-1"></div>
    Login or Signup to reply.
  2. 0

    To modify the CSS animation and make the lines grow from the initial angle of 40 degrees without rotation, you can adjust the transform properties in the keyframes animation. Here’s an updated version of your CSS code:

    .rec-1 {
  position: relative;
  width: 80%;
  margin: 1rem 0;
}

.rec-1::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 30px;
  transform: scaleX(0);
  transform-origin: left bottom;
  background-color: #1DCDFE;
  animation: line-growth 1.5s linear;
  transition: ease-in;
}

.rec-1:nth-of-type(2)::before {
  background-color: #11FFC4;
}

.rec-1:nth-of-type(3)::before {
  background-color: #21D0B2;
}

.rec-1:nth-of-type(4)::before {
  background-color: #2F455C;
}

@keyframes line-growth {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

    In this updated code, we’re using the ::before pseudo-element to create the growing lines. We set the position of .rec-1 to relative to create a positioning context for the pseudo-element.

    The ::before pseudo-element has position: absolute and is positioned at the bottom left corner of .rec-1 using bottom: 0 and left: 0. Its initial width is set to 0, and the height is set to 30px to match the border thickness you specified.

    We use transform: scaleX(0) to initially scale the width of the pseudo-element to 0, effectively hiding it. By setting transform-origin: left bottom, we ensure the growth starts from the bottom left corner.

    The animation is applied using animation: line-growth 1.5s linear, where line-growth is the name of the keyframes animation, and 1.5s is the duration. We set it to linear to achieve a consistent growth rate.

    Each .rec-1 element has a different background-color specified to match the styles you’ve set in your original code.

    With these modifications, the lines will grow vertically from the bottom left corner without rotation. Feel free to adjust the width, height, colors, and animation properties as needed.

    Login or Signup to reply.
  3. 0 
    <!DOCTYPE html>
<html>
<head>
<style>

.stripes-1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align items to the left side */
  margin-left: 200px; /* Adjust the left margin as needed */
}

.rec-1 {
  height: 0;
  width: 72.5%;
  margin: 1rem 0;
  position: relative;
  left: 10px; /* change left depend on your desire */
  top: 30px; /* change top depend on your desire */
  border-bottom: 30px solid transparent; /* Set initial border to transparent */
  animation: expandHeight 1s ease-in-out forwards;
}

@keyframes expandHeight {
  0% {
    height: 0; /* Start with 0 height */
  }
  100% {
    height: 100%; /* Expand to 100% height */
  }
}

.rec-1:nth-of-type(1) {
  border-color: #1DCDFE;
}

.rec-1:nth-of-type(2) {
  border-color: #11FFC4;
}

.rec-1:nth-of-type(3) {
  border-color: #21D0B2;
}

.rec-1:nth-of-type(4) {
  border-color: #2F455C;
}


</style>

</head>
<body>

<div class="stripes-1">
  <span class="rec-1"></span>
  <span class="rec-1"></span>
  <span class="rec-1"></span>
  <span class="rec-1"></span>
</div>


</body>
</html>

    1- i set align-items: flex-start on the .stripes-1 container to align the lines to the left side.

    2- The height property of .rec-1 is initially set to 0, and we animate it to 100% using the expandHeight animation.

    3- i removed the unnecessary transform and animation properties that were causing the rotation and unwanted effects.
    4- The border color is set for each nth-of-type element using the border-color property instead of border-bottom, and the border-bottom color is set to transparent initially.

    With these modifications, the lines will grow vertically from their initial angle of 40 degrees without any rotation. Feel free to adjust the margins and other properties to fit your animation requirements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search