如何实现CSS中斜线无旋转的生长动画？

我正在制作一个斜线动画，希望斜线从初始长度0%生长至100%，且动画过程中无旋转效果。目前我的HTML和CSS代码如下：

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;
}

当前问题是动画过程中斜线不仅生长还会旋转，我希望它们保持初始40度角度并沿长度方向生长。我尝试过调整transform-origin属性和添加独立动画，但未能达到预期效果。恳请指导如何修改CSS动画，实现斜线保持40度初始角度无旋转的生长效果？

问题核心是你在动画中同时修改了rotate和scaleX属性，导致元素从0度旋转到40度。要实现固定角度的生长，只需把旋转效果固定在元素基础样式中，动画仅控制长度缩放，同时调整变换原点确保生长方向正确：

修改后的CSS代码如下：

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

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

.rec-1 {
  /* 固定旋转角度，初始缩放为0 */
  transform: rotate(40deg) scaleX(0);
  width: 72.5%;
  margin: 1rem 0;
  animation: appearUp 1.5s linear forwards;
  position: relative;
  left: 500px;
  top: 350px;
  /* 设置变换原点为左端，让斜线从左向右生长 */
  transform-origin: left center;
}

@keyframes appearUp{
  100%{
    /* 仅修改缩放比例，保持旋转角度不变 */
    transform: rotate(40deg) scaleX(1);
  } 
}

.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;
}

关键修改说明： #

1. 固定旋转角度：将rotate(40deg)移到元素基础样式的transform中，确保元素始终保持40度倾斜。
2. 简化动画逻辑：动画仅控制scaleX从0到1的变化，不再修改旋转值，避免动画过程中出现旋转动作。
3. 调整变换原点：添加transform-origin: left center，让斜线从左端开始沿长度方向向右生长，符合预期效果。
4. 清理冗余代码：移除重复的animation声明和无效的transition属性，精简代码结构。

内容的提问来源于stack exchange，提问作者user20900621