Staggered infinite CSS animation - css

Question

I was wondering if it was possible to have a looped animation that staggers each time the animation completes one full loop?
.hex{
animation: fio $animation-speed ease-in-out infinite;
transform: scale(.9);
opacity: 0;
&.one{
}
&.two{
animation-delay: $animation-speed * 1;
}
&.three{
animation-delay: $animation-speed * 2;
}
}
#keyframes fio{
0% {
opacity:0;
transform: scale(0.90);
}
50% {
opacity:1;
transform: scale(1.00);
}
100% {
opacity:0;
transform: scale(0.90);
}
}
As you can see from the code, it is currently staggering the first time it goes through the animation, however after that it just fades all 3 elements in and out at the same time. Is it possible to get it to stagger after every loop?
If you need any more information please let me know.
Thanks!

Answer 1

You just need to calculate the whole animation duration with all the delays and set them accordingly like this:
.hex {
animation: fio 1800ms ease-in-out infinite; /* This devided to three is the amount you want for the delay below */
animation-delay: 3600ms; /* All animation delays in one + two + three and add animation duration above to this */
transform: scale(.9);
opacity: 0;
&.one {
animation-delay: 0ms;
width: 50px;
height: 50px;
background-color: red;
}
&.two {
animation-delay: 600ms;
width: 50px;
height: 50px;
background-color: blue;
}
&.three {
animation-delay: 1200ms;
width: 50px;
height: 50px;
background-color: green;
}
}
Fiddle: https://jsfiddle.net/2u43tc8z/2/