扩展已翻译元素的第一个动画的最终状态

扩展已翻译元素的第一个动画的最终状态

据我所知，这对于纯CSS是不可能的，因为（正如您已经指出的），当我们向已经具有转换的元素添加额外的转换规则时，整个转换会被重置，因为它会覆盖并且不会附加到现有的转换。

使用JS可能可以实现，但是即使那样也很难实现，因为我们必须执行以下 *** 作：

• animationend

  在第一个动画完成时处理事件。
• 在处理程序中，

  translateX(...)

  以像素为单位。
• 获取下一个动画的CSS关键帧规则，对其进行修改以将其

  translateX(...)

  作为转换堆栈的第一部分。

注意： 我假设您遇到的情况是绝对没有办法使用问题中提到的第一种方法。

---

实现类似效果的另一种方法是为元素的

margin

或设置动画，

position

而不是使用

transform:translate()

。这种方法的主要缺点是，这不会在GPU层上完成（与不同

transform

），因此，当同时发生多个此类动画时，速度会变慢（并且可能会很昂贵）。

使用边距：

下面的代码段通过动画

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, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 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, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 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 >  <div >1</div></div><div >  <div >2</div></div><div >  <div >3</div></div>

---

使用位置：

该片段通过动画

left

和

top

属性达到相同的效果。子元素具有

position: absolute

。

.animation-1,.animation-2,.animation-3 {  width: 200px;  height: 200px;  display: inline-block;  background: white;  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);  position: relative;}.movable-1,.movable-2,.movable-3 {  background: #41A186;  width: 50px;  height: 50px;  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 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, 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% {    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 >  <div >1</div></div><div >  <div >2</div></div><div >  <div >3</div></div>

---

注意： 如我在此处的答案所述，您当然可以添加包装元素并为其设置下移动画。这将产生与第一个相同的效果，但是我不建议采用这种方法，因为这与您的问题的重点相反（我认为是-如何将多个动画添加到同一个元素，并使第二个动画从何处开始第一个结束 ）。

.animation-1,.animation-2 {  width: 200px;  height: 200px;  display: inline-block;  background: white;  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);}.movable-1,.movable-2 {  background: #41A186;  width: 50px;  height: 50px;  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 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;  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 >  <div >1</div></div><div >  <div >    <div >2</div>  </div></div>