我正在制作一個動畫，我希望對角線從初始高度的0%增長到100%，沒有任何旋轉。目前，我有以下CSS代碼:

超文本標記語言

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

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.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度的初始角度開始增長，而不旋轉嗎？

更新的HTML和CSS

# # #此變換:scaleX(100%)旋轉(40度)；和這個變換:旋轉(40度)scaleX(100%)；-這不是一回事。

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>

# # #要修改CSS動畫并使線條從40度的初始角度開始增長而不旋轉，您可以調整關鍵幀動畫中的變換屬性。這是您的CSS代碼的更新版本:

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

在這個更新的代碼中，我們使用::before偽元素來創建增長行。我們設定…的位置。rec-1 to relative為偽元素創建定位上下文。

::before偽元素的位置為:absolute，位于的左下角。rec-1使用底部:0和左側:0。它的初始寬度設置為0，高度設置為30px，以匹配您指定的邊框粗細。

我們使用transform: scaleX(0)最初將偽元素的寬度縮放為0，有效地隱藏了它。通過設置變換-原點:左下角，我們確保從左下角開始生長。

使用animation:line-growth 1.5s linear應用動畫，其中line-growth是關鍵幀動畫的名稱，1.5s是持續時間。我們將其設置為線性，以實現一致的增長率。

每個。rec-1元素指定了不同的背景色，以匹配您在原始代碼中設置的樣式。

通過這些修改，線條將從左下角開始垂直增長，而不會旋轉。根據需要隨意調整寬度、高度、顏色和動畫屬性。