如何进行两个链式变换，第一个有过渡，第二个没有横框

Question

我需要添加两个链式变换，一个是动画的，另一个没有动画。类似于：

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

然后，500ms后：

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

因此，对象将通过动画平移X轴上的第一个100%宽度，然后在不设置动画的情况下直接平移到200%，只进行普通设置。

如何？

Answer 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%);
}
}

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

有了过渡，你可以考虑2个divs:

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