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

Question

我有两个css3关键帧和触发一些按钮，但问题是，当我试图添加一个新的关键帧(新类)的过渡不以平稳的方式改变，如何使这种过渡工作顺利?

source in 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;
}

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

只是玩弄两个元素状态的宽度和高度，以及它们之间的过渡，以适应您的需要