將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位置。 然後，使用透視屬性（在父級中）實現縮放效果。 較低的視角會使變換的效果變大。請注意，動畫總是相同的，這是視覺效果的變化。

此外，視角是動畫，所以你可以使過渡平穩