Html 如何进行两个链式变换，第一个带转换，第二个不带转换？

我需要添加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%，只需简单设置

---

如何？

您可以使用如下动画：

.box{
宽度：100px；
高度：100px；
背景：红色；
动画：向前改变1s；
}
@关键帧改变{
50% {
转化：translateX（100%）；
}
50.1%，100%{/*50%后立即更改*/
转化：translateX（200%）；
}
}

---

您可以使用如下动画：

.box{
宽度：100px；
高度：100px；
背景：红色；
动画：向前改变1s；
}
@关键帧改变{
50% {
转化：translateX（100%）；
}
50.1%，100%{/*50%后立即更改*/
转化：translateX（200%）；
}
}