将CSS3循环动画与悬停动画无缝混合？

我在一个div上有一个脉动css3效果，我希望它有一个与脉动无缝融合的悬停效果，我这里有一个接近完成的JFiddle：

它就快到了，但是当你把鼠标悬停在它上面的时候，它会变得急促，有没有办法让动画更流畅

非常感谢

代码如下：

.orb {
width: 20px;
height: 20px;
border-radius: 10px;
background: #2fa4e7;
cursor: pointer;
opacity: 1;
-webkit-transform: scale(1);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

@-webkit-keyframes pulsate {
0%   { opacity: 1; }
50%  { opacity: .4; -webkit-transform: scale(3); }
100% { opacity: 1; }
}

.orb {
-webkit-animation: pulsate 2s infinite;
}

.orb:hover {
width: 20px;
height: 20px;
border-radius: 10px;
background: #2fa4e7;
cursor: pointer;
opacity: 1;
-webkit-transition: all .2s ease-in-out;
-webkit-animation: pulsatehover 2s infinite;
}

@-webkit-keyframes pulsatehover {
0%   { opacity: 1; }
50%  { opacity: .4; -webkit-transform: scale(6); }
100% { opacity: 1; }
}

---

据我所知，在CSS中没有办法链接或合并2个动画

但是，您可以得到想要改变其工作方式的效果

.container{
宽度：80px；
高度：80px；
利润率：100像素；
边框：纯红1px；
位置：相对位置；
透视图：800px；
过渡：视角2；
}
.容器：悬停{
透视图：400px；
}
B.obj{
位置：绝对位置；
宽度：100%；
身高：100%；
背景：浅蓝色；
边界半径：50%；
-webkit动画：脉冲1s无限交替；
动画：脉冲1s无限交替；
}
@-webkit关键帧脉冲{
0%{transform:translateZ（0px）}
100%{transform:translateZ（200px）}
}
@关键帧脉冲{
0%{transform:translateZ（0px）}
100%{transform:translateZ（200px）}
}

---

太棒了，做得很漂亮！谢谢你的帮助！