如何从一个 css3 关键帧平滑过渡到另一个关键帧答案

【问题标题】：how to make a smooth transition from one css3 keyframe to other keyframe如何从一个 css3 关键帧平滑过渡到另一个关键帧
【发布时间】：2015-09-16 04:57:55
【问题描述】：

我有两个 css3 关键帧并通过某个按钮触发，但问题是当我尝试添加新关键帧（新类）时，过渡不会以平滑的方式发生变化，如何使过渡顺利进行？

来源fiddle here

.button { 
    width:50px;
    height:50px;
    background:silver;
}
.box {
    width: 100px;
    height: 100px;
    background: green;
    position: relative;
    top: 10%;
    left: 10%;
}
.box {
    animation: xx 2s linear infinite;
}
.boxShake {
    animation:boxShake 2s linear infinite;
}

【问题讨论】：

没有。不可能有两个原因（1）当原始动画被删除（不再适用）时，元素会回弹到其原始位置而不是过渡（FF会但Chrome和其他浏览器不会't) 就像提到的here...
(2) 将新值应用于转换属性后，它会覆盖前一个值（如提到的here），因此会再次恢复到原始位置。
@Riantori: JS 解决方案可以接受吗？
@Riantori: jsfiddle.net/rswmb4sr/2.
@Harry 我找到了一个（棘手的）方法来获得它:-)

标签： css css-transitions

【解决方案1】：

实现这一点的一个技巧是不要更改动画。

但要制作一个复合动画，以百分比形式转换 X 和 Y。

现在，改变元素的宽度和高度，我们修改未改变的动画在一个轴或另一个轴上的移动量

$(".button").click(function(){
	$("#mover").toggleClass("alternate");
});

.button { 
    width:50px;
    height:50px;
    background:silver;
}
.box {
    width: 100px;
    height: 100px;
    background: green;
    position: relative;
    top: 10%;
    left: 10%;
}
.box {
    animation: xx 2s linear infinite;
}
#mover {
    width: 0px;
    height: 20px;
    transition: width 2s, height 2s;
    animation: mover 2s linear infinite;
}
#mover.alternate {
    width: 5px;
    height: 0px;
}
@keyframes mover {
   0% {transform:translate(   0%,   0%);}
  10% {transform:translate(-100%,  20%);}
  20% {transform:translate( 100%,  40%);}
  30% {transform:translate(-100%,  60%);}
  40% {transform:translate( 100%,  80%);}
  50% {transform:translate(-100%, 100%);}
  60% {transform:translate( 100%,  80%);}
  70% {transform:translate(-100%,  60%);}
  80% {transform:translate( 100%,  40%);}
  90% {transform:translate(-100%,  20%);}
 100% {transform:translate(   0%,   0%);}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">Button</div>
<div id="mover">
<div class="box"></div>
</div>

只需调整 2 个元素状态的宽度和高度，以及它们之间的过渡，以适应您的需求

【讨论】：

不错的努力 :) 没有什么对你不利的，但我认为这太复杂了。
@Harry 如果你没有说这是不可能的，我可能不会尝试 :-) 是的，要走的路应该是 Javascript。有很多库可以处理这个问题。