使用JS可能有可能实现,但即使在那里也很难实现,因为我们必须执行以下操作：

>完成第一个动画后处理animationend事件.
>在处理程序中,以像素为单位获取translateX(…).
>获取下一个动画的CSS关键帧规则,修改它们以将translateX(…)作为变换堆栈的第一部分.

注意：我假设您有一个案例,绝对没有办法使用问题中提到的第一种方法.

实现类似效果的另一种方法是为元素的边距或位置设置动画,而不是使用transform：translate().这种方法的一个主要缺点是,这不会在GPU层完成(与变换不同),因此当多个这样的动画同时发生时(并且也可能是昂贵的)会更慢.

使用边距：

下面的代码片段通过设置margin-left和margin-top属性的动画来实现效果.

.animation-1,.animation-2,.animation-3 {
  width: 200px;
  height: 200px;
  display: inline-block;
  background: white;
  Box-shadow: 0 2px 2px 0 rgba(0,0.12);
  vertical-align: middle;
}
.movable-1,.movable-2,.movable-3 {
  background: #41A186;
  width: 50px;
  height: 50px;
  Box-shadow: 0 2px 2px 0 rgba(0,0.12);
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}
.movable-1 {
  animation-name: move1;
  animation-duration: 4s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
.movable-2 {
  animation-name: move2-right,move2-down;
  animation-duration: 2s,2s;
  animation-delay: 4s,6s;
  animation-fill-mode: forwards,forwards;
  animation-timing-function: linear;
}
.movable-3 {
  animation-name: move3-diagonal;
  animation-duration: 4s;
  animation-delay: 8s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
@keyframes move1 {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(30px) translateY(50px);
  }
}
@keyframes move2-right {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: 30px;
  }
}
@keyframes move2-down {
  0% {
    margin-top: 0px;
  }
  100% {
    margin-top: 50px;
  }
}
@keyframes move3-diagonal
 {
  0% {
    margin-top: 0px;
    margin-left: 0px;
  }
  100% {
    margin-top: 50px;
    margin-left: 30px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="animation-1">
  <div class="movable-1">1</div>
</div>
<div class="animation-2">
  <div class="movable-2">2</div>
</div>
<div class="animation-3">
  <div class="movable-3">3</div>
</div>

使用职位：

此片段通过动画左侧和顶部属性实现相同的效果.子元素的位置是：绝对的.

.animation-1,0.12);
  position: relative;
}
.movable-1,0.12);
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
  position: absolute;
}
.movable-1 {
  animation-name: move1;
  animation-duration: 4s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
.movable-2 {
  animation-name: move2-right,forwards;
  animation-timing-function: linear;
}
.movable-3 {
  animation-name: move3-diagonal;
  animation-duration: 4s;
  animation-delay: 8s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
@keyframes move1 {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(30px) translateY(50px);
  }
}
@keyframes move2-right {
  0% {
    left: 0px;
  }
  100% {
    left: 30px;
  }
}
@keyframes move2-down {
  0% {
    top: 0px;
  }
  100% {
    top: 50px;
  }
}
@keyframes move3-diagonal {
  0% {
    top: 0px;
    left: 0px;
  }
  100% {
    top: 50px;
    left: 30px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="animation-1">
  <div class="movable-1">1</div>
</div>
<div class="animation-2">
  <div class="movable-2">2</div>
</div>
<div class="animation-3">
  <div class="movable-3">3</div>
</div>

注意：如我在答案here中所述,您当然可以添加包装元素并将向下移动动画设置为它.这会产生与第一个相同的效果,但我并不是建议这种方法,因为它违背了你的问题(在我看来是 – 如何将多个动画添加到同一个元素并使第二个从哪里开始)第一个结束).

.animation-1,0.12);
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}
.movable-1 {
  animation-name: move1;
  animation-duration: 4s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
.movable-2 {
  animation-name: move2-right;
  animation-duration: 2s;
  animation-delay: 4s;
  animation-fill-mode: forwards;
}
.movable-2-wrapper {
  animation-name: move2-down;
  animation-duration: 2s;
  animation-delay: 6s;
  animation-fill-mode: forwards;
}
@keyframes move1 {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(30px) translateY(50px);
  }
}
@keyframes move2-right {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(30px);
  }
}
@keyframes move2-down {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(50px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="animation-1">
  <div class="movable-1">1</div>
</div>
<div class="animation-2">
  <div class='movable-2-wrapper'>
    <div class="movable-2">2</div>
  </div>
</div>