如何使元素的动态列表在水平方向上显示到每个6个索引，然后在颤动中垂直显示

<div class="container">
  <div class="item">元素1</div>
  <div class="item">元素2</div>
  <div class="item">元素3</div>
  <div class="item">元素4</div>
  <div class="item">元素5</div>
  <div class="item">元素6</div>
  <div class="item">元素7</div>
  <div class="item">元素8</div>
  <div class="item">元素9</div>
  <div class="item">元素10</div>
  <div class="item">元素11</div>
  <div class="item">元素12</div>
  <!-- 其他元素... -->
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.item {
  width: 16.66%; /* 每个元素占据容器的1/6宽度 */
  animation: shake 1s infinite;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(0); }
  75% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}