将 CSS 移动过渡应用于具有 `transform` 属性的元素答案

【问题标题】：Apply CSS Moving Transition to element with `transform` property将 CSS 移动过渡应用于具有 `transform` 属性的元素
【发布时间】：2020-01-13 14:01:08
【问题描述】：

我想将 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

如何仅将过渡应用于运动，而不是形状变换？

【问题讨论】：

标签： css css-animations transition

【解决方案1】：

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

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

【讨论】：