Is it possible when using the css transform property to delay only one value and not the other using transition-delay

Question

I have written the following code in order to animate a hamburger menu using css and a bit of javascript. However, I intend for the animation to work as follows. First, I want the top and bottom line to shrink and for the middle to shrink completely. Then I want the top and bottom bar to meet in the middle by changing the scaleY in the css transform property. Only then do I want the top line to rotate by 45 degrees and the bottom to rotate by -45 degrees creating an x. My question is when using the transition-delay property I can only delay the transform entirely. Is there a way to delay only the rotate value from the transform property? Hopefully this makes sense. I will include the code below.

<svg id="hamburger" class="hamburger" viewBox="0 0 100 100" width="100" stroke="black" stroke-width="10" xmlns="http://www.w3.org/2000/svg">
  <line class="line top" x1="10" y1="20" x2="90" y2="20"></line>
  <line class="line middle" x1="10" y1="50" x2="90" y2="50"></line>
  <line class="line bottom" x1="10" y1="80" x2="90" y2="80"></line>
</svg>

<style>
.hamburger .line {
  transition: transform 0.3s ease, translateY 0.3s ease; /* Add translateY transition */
  transform-origin: center;
}

.hamburger.clicked .line {
  transform: scaleX(0.75);
}

.hamburger.clicked .line.middle {
  transform: scaleX(0);
}

.hamburger.clicked .line.top {
  transform: scaleX(0.75) translateY(30px) rotate(45deg); /* Add translateY transformation */
  transform-origin: 50px 20px;
  
}

.hamburger.clicked .line.bottom {
  transform: scaleX(0.75) translateY(-30px) rotate(-45deg); /* Add translateY transformation */
  transform-origin:  50px 80px;
}

.hamburger {
  background: red;
}
</style>

<script>
document.getElementById('hamburger').addEventListener('click', function() {
  this.classList.toggle('clicked');
});
</script>

I created a gif to display how I intend the animation to work as wellenter image description here

I have tried specifying only the rotate value within the transition-delay property to no avail.