CSS3 Translate multiple times?

Question

My basic scene is like so:

• Step 1: Move red box to left hand side, out of viewport.
• Step 2: Then, instantly move red box back to start position, without any animation.

I don't know how to accomplish this exactly as I want.

My code is as follows:

.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

Animations by default work that way. That is, the element would immediately snap back to its original position after the animation is completed (unless animation-fill-mode is set as forwards).

Your problem is with the keyframes setting. When you set the transform to happen at 50% and your initial transform state is null, the element would gradually move from original position (no transform) to translated position for the first 50% of the animation and then gradually move back again from the end position to the original for the next 50%. You can avoid it by setting the keyframe at 100% instead.

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