在不同关键帧处平滑动画

Question

请告诉我如何制作“流畅”的动画。

我有关键帧，它描述了下载动画的行为。在Hover，连接其他关键帧（动画并改变其路线）。

在它们之间，变化发生了锐度。

以下是字段http://jsfiddle.net/g4wvqrL8/

的示例

.icon-1 {
    width: 3em;
    height: 3em;
    margin: 85px auto;
    animation: pull 3s infinite reverse ease-in-out
}
.icons {
    width:80%;
    margin: 0 auto;
    height:90px;
}
.icons:hover {
    animation: rotate360 4s infinite reverse cubic-bezier(0.4, 0, 1, 1);
}
@keyframes pull {
  0% {
        transform: translateY(0px);
    }
    50%   {
        transform: translateY(-55px);
    }
    100%{
        transform: translateY(0px);
    }  
}
@keyframes rotate360 {
    0% {
        transform: rotate(0deg) translateX(30px);       
    }
    100%   {
        transform: rotate(360deg) translateX(30px);
    }
}

问题：如何在Hover的不同关键帧上进行2种动画的平滑过渡？

我试图进行转换（在Hover处将它们移动到所需的轨迹并开始一个新的动画，但仍然没有平滑）。

或者如何启动动画以留住这个动画的地方??

提示，提前谢谢！