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

一尘不染

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

css

我知道这里多次被问到，但是我要求为这种动画使用不同的方法。

问题：

第二个框具有多个动画，试图创建与第一个相同的效果。似乎transform属性正在被覆盖（应有）*
。我正在尝试使用第二动画的属性扩展（第二盒子的）第一动画。尝试使用animation-fill-mode: forwards但没有成功。也许我缺少一些基本的东西。香草CSS可能吗？

参考

“ animation-name”属性定义了适用的动画列表。如果多个动画试图修改同一属性，则最接近名称列表末尾的动画获胜。

需求：

单独的规则move2-right和move2-down关键帧规则，但是在同一个元素上起作用，保留了第一个动画转换。如果有另一种方法可以处理这种动画，请指导我。

电流输出：

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

  -webkit-animation-name: move1;

  animation-name: move1;

  -webkit-animation-duration: 4s;

  animation-duration: 4s;

  -webkit-animation-delay: 0s;

  animation-delay: 0s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

}

.movable-2 {

  -webkit-animation-name: move2-right, move2-down;

  animation-name: move2-right, move2-down;

  -webkit-animation-duration: 2s, 2s;

  animation-duration: 2s, 2s;

  -webkit-animation-delay: 4s, 6s;

  animation-delay: 4s, 6s;

  -webkit-animation-fill-mode: forwards, forwards;

  animation-fill-mode: forwards, forwards;

}

@-webkit-keyframes move1 {

  0% {

    -webkit-transform: translateX(0px);

    transform: translateX(0px);

  }

  50% {

    -webkit-transform: translateX(30px);

    transform: translateX(30px);

  }

  100% {

    -webkit-transform: translateX(30px) translateY(50px);

    transform: translateX(30px) translateY(50px);

  }

}

@keyframes move1 {

  0% {

    -webkit-transform: translateX(0px);

    transform: translateX(0px);

  }

  50% {

    -webkit-transform: translateX(30px);

    transform: translateX(30px);

  }

  100% {

    -webkit-transform: translateX(30px) translateY(50px);

    transform: translateX(30px) translateY(50px);

  }

}

@-webkit-keyframes move2-right {

  0% {

    -webkit-transform: translateX(0px);

    transform: translateX(0px);

  }

  50% {

    -webkit-transform: translateX(30px);

    transform: translateX(30px);

  }

  100% {

    -webkit-transform: translateX(30px);

    transform: translateX(30px);

  }

}

@keyframes move2-right {

  0% {

    -webkit-transform: translateX(0px);

    transform: translateX(0px);

  }

  50% {

    -webkit-transform: translateX(30px);

    transform: translateX(30px);

  }

  100% {

    -webkit-transform: translateX(30px);

    transform: translateX(30px);

  }

}

@-webkit-keyframes move2-down {

  0% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

  }

  50% {

    -webkit-transform: translateY(50px);

    transform: translateY(50px);

  }

  100% {

    -webkit-transform: translateY(50px);

    transform: translateY(50px);

  }

}

@keyframes move2-down {

  0% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

  }

  50% {

    -webkit-transform: translateY(50px);

    transform: translateY(50px);

  }

  100% {

    -webkit-transform: translateY(50px);

    transform: translateY(50px);

  }

}


<div class="animation-1">

  <div class="movable-1">1</div>

</div>

<div class="animation-2">

  <div class="movable-2">2</div>

</div>

阅读 215

2020-05-16

共1个答案

一尘不染

据我所知，这对于纯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 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>

使用位置：

该片段通过动画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 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,

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

2020-05-16