Question

我需要添加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％而不进行动画处理，而只是进行简单设置。

如何？

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

如何进行2个链式转换，第一个转换带有转换，第二个转换没有transtransion？

1 个答案: