title: How to animate multiple CSS transform properties separately using keyframe animation
body: <p>I want to animate two (or more) CSS transform properties separately using keyframe animation like this:</p>
  <pre><code>@keyframes translatex {
      100% {
          transform: translateX(100px);
      }
  }
  @keyframes rotatez {
      100% {
          transform: rotateZ(80deg);
      }
  }
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;rect&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>The <code>translatex</code> animation should start with a 0s delay and last for 5 seconds. The <code>rotatez</code> animation should start with a 1s delay and last for 3 seconds. The <code>.rect</code> element starts moving, then after 1 second it starts rotating, then after 3 seconds it stops rotating and after 1 more second it finishes its movement.</p>
  <p>Apply animation:</p>
  <pre><code>.rect {
      animation-name: translatex, rotatez;
      animation-duration: 5s, 3s;
      animation-timing-function: ease, ease-in-out;
      animation-delay: 0s, 1s;
      animation-direction: forward, forward;
  }
  </code></pre>
  <p>The problem is that only the <code>rotatez</code> animation is applied.</p>
  <p>Are there ways to implement the animation using only CSS, such as keyframe animation or transitions, or do I need JavaScript and <code>requestAnimationFrame</code>?</p>