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

Question

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

https://jsfiddle.net/jnz7yfg0/

它就快到了，但是当你在上面盘旋的时候，有什么想法可以让动画变得更流畅吗？

非常感谢！

这里的代码：

.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; }
}

Answer 1

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

然而，你可以得到你想要改变它的工作方式的效果。

​

.container {
  width: 80px;
  height: 80px;
  margin: 100px;
  border: solid red 1px;
  position: relative;
  perspective: 800px;
  transition: perspective 2s;
}

.container:hover {
  perspective: 400px;
}
.obj {
   position: absolute;
  width: 100%;
  height: 100%;
  background: lightblue;
  border-radius: 50%;
  -webkit-animation: pulse 1s infinite alternate;
  animation: pulse 1s infinite alternate;
}

@-webkit-keyframes pulse {
   0% {transform: translateZ(0px)}  
  100% {transform: translateZ(200px)}  
}
@keyframes pulse {
   0% {transform: translateZ(0px)}  
  100% {transform: translateZ(200px)}  
}

<div class="container">
<div class="obj">
</div>
</div>

​

诀窍是使动画改变元素的z位置。然后，通过透视图属性(在父属性中)实现缩放效果。较低的比特率使变换的效果更大。请注意，动画总是一样的，这是视觉效果的变化。

此外，透视图是可动画的，因此您可以使过渡平稳。