如何进行 2 个链式转换，第一个带有转换，接下来没有转换？

【问题标题】：How to make 2 chained transforms, the first with transition and the following with no transotions?如何进行 2 个链式转换，第一个带有转换，接下来没有转换？
【发布时间】：2018-12-03 22:09:53
【问题描述】：

我需要添加 2 个链式变换，一个是动画的，另一个是没有动画的。比如：

transition: transform 500ms;
transform: translateX(100%);

然后，在 500 毫秒后：

transform: translateX(200%); // this time without any transition or, in other words, with transition time == 0ms.

因此对象将在 X 轴上通过动画平移前 100% 的宽度，而不是在没有动画的情况下直接移动到 200%，只是简单设置。

怎么做？

【问题讨论】：

标签： html css css-transitions css-animations css-transforms

【解决方案1】：

您可以使用如下动画：

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: change 1s forwards;
}

@keyframes change {
  50% {
    transform: translateX(100%);
  }
  50.1%, 100% { /*change right after 50%*/
    transform: translateX(200%);
  }
}

&lt;div class="box"&gt;&lt;/div&gt;

通过过渡，您可以考虑 2 个 div：

.container {
  display:inline-block;
  transition:0s 0.5s transform;
}

.box {
  width: 100px;
  height: 100px;
  background: red;
  transition:0.5s transform;
}

body:hover .container,
body:hover .box{
  transform: translateX(100%);
}

<div class="container">
<div class="box"></div>
</div>

【讨论】：