css - 将 CSS Moving Transition 应用于具有 `transform` 属性的元素

Question

我想将 CSS 移动过渡应用于具有 transform 属性的元素。

转换前:

<ul class="list">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

转换后:

<ul class="list">
  <li>two</li>
  <li>three</li>
  <li>one</li>
</ul>

CSS:

.list > li {
  transform: skewX(15deg);
  transform-origin: bottom left;
}

我尝试应用 transition: transform 1s，然后 skewX 也被重置并重新应用。

示例视频在这里:https://youtu.be/n3qC3uny5uM

我怎样才能只对运动应用过渡，而不对形状变换应用过渡？

Answer 1

您可以使用 CSS 动画执行以下操作。

.container {
  background: #f7f8f9;
  display: flex;
}

.container div {
  width: 40px;
  height: 100px;
  background: #fcc700;
  margin: 0 4px;
  animation: spin linear 1.2s;
  // animation: spin linear 1s infinite;
}

@keyframes spin {
  from {
    transform: translateX(-50px);
  }
  to {
    transform: translateX(50px) skewX(-15deg);
    
  }
}

  <div class="container">
    <div>A</div>
    <div>B</div>
  </div>