问题描述
据我所知，这对于纯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>
解决方法
我知道这里多次被问到，但是我要求为这种动画使用不同的方法。
问题：
第二个框具有多个动画，试图创建与第一个相同的效果。似乎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.14),0 3px 1px -2px rgba(0,0.2),0 1px 5px 0 rgba(0,0.12);
}
.movable-1,.movable-2 {
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 {
-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>