CSS3 翻译多次？

Question

我的基本场景是这样的：

第 1 步：将红色框移到左侧，离开视口。
第二步：然后，立即将红框移回起始位置，没有任何动画。

我不知道如何完全按照我的意愿完成此操作。

我的代码如下：

.box {
  background: red;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0px;
  right: 0px;
  animation: nudge 5s linear;
}
@keyframes nudge {
  50% {
    transform: translate(-5650px, 155px);
  }
}

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

Answer 1

使用100% {transform: translate(-5650px, 155px);}代替50% {transform: translate(-5650px, 155px);}

.box {
   background: red;
   width: 30px;
   height: 30px;
   position: absolute;
   top: 0px;
   right: 0px;
   animation: 
   nudge 2s linear;
}

@keyframes nudge {  
   100% {
      transform: translate(-2560px, 155px);
   } 
}

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

Answer 2

默认情况下动画是这样工作的。也就是说，元素会在动画完成后立即回到原来的位置（除非 animation-fill-mode 设置为 forwards）。

您的问题出在 keyframes 设置上。当您将变换设置为发生在 50% 并且您的初始 transform 状态为 null 时，元素将逐渐从原始位置（无变换）移动到动画前 50% 的平移位置，然后在接下来的 50% 中，逐渐从结束位置再次回到原来的位置。您可以通过将关键帧设置为 100% 来避免它。

.box {
   background: red;
   width: 30px;
   height: 30px;
   position: absolute;
   top: 0px;
   right: 0px;
   animation: nudge 5s linear;
}

@keyframes nudge {  
   100% {
      transform: translate(-5650px, 155px);
   } 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="box"></div>

CSS3 翻译多次？

CSS3 Translate multiple times?

css

animation

css-animations

translate-animation