CSS3翻译多次？

Question

我的基本场景是这样的：

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

我不知道如何完全按照自己的意愿完成这项任务。

我的代码如下：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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状态为空时，元素将逐渐从原始位置（无变换）移动到动画的前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>