Why don't my CSS animations run simultaneously? - css

Question

I am working on a proof of concept. I am trying to duplicate Tinder UX using HTML and CSS, here's my link: CodePen
The problem is that I have two main animations which should run in parallel with each other. But they run sequentially, one after another. Is there a way to run them at the same time?
animation on profile picture.
.tinder-profile
{
-webkit-animation: avatar 0.8s;
animation: avatar 0.8s;
}
#keyframes avatar {
0% {
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
}
60% {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
and pulsing circles in the background:
<pre>
.tinder-ping1{
-webkit-animation: ping 3s ease-in-out infinite;
animation: ping 3s ease-in-out infinite;
z-index:9;
}
#keyframes ping {
0% {
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
opacity: 0.0;
}
40% {
opacity: 1.0;
}
100% {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
opacity: 0.0;
}
}
</pre>
Here is a link to the EditPen, where you can see all the code: CodePen

Answer 1

It has to do with the initial position of your tinder-ping elements. They all start full sized and so effectively the animations don't appear to be working until the third one finally resizes to be small. You'll have to play around with the actual settings, but setting pings 1, 2, and 3 to have
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
opacity: 0;
As initial values makes it better. You might also need to test out z-indexes, but that is a place to start.
In essence, your third ping is hiding the other two because it is 520x520 pixels until after the animation delay.