Seamlessly blend CSS3 loop animation with hover animation? - css

Question

I have a pulsating css3 effect on a div, and I'd like it to have a hover effect that seamlessly blends with the pulse, I have a near finished JFiddle here:
https://jsfiddle.net/jnz7yfg0/
It's nearly there, but it's jerky when you hover over it, any ideas to make the animation smoother?
Many thanks!
Code here:
.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

As far as I know, there is no way in CSS to chain or merge 2 animations.
You can however get the effect that you want changing the way it works
.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>
The trick is to make the animation change the z position of the element.
Then , the zoom effect is achieved with the perspective property (in the parent).
A lower pespective makes the effect of the transform bigger. Notice that the animation is always the same, it's the visual effect that changes.
Also, the perspective is animatable, so you can make the transition smooth