Gestaffelte unendliche CSS-Animation

Question

Ich frage mich, ob es möglich ist, eine Animation mit Schleifen zu haben, die jedes Mal staffelt, wenn die Animation eine vollständige Schleife abschließt?

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

Wie Sie aus dem Code sehen können, ist es das erste Mal ist zurzeit Staffelung es durch die Animation geht, aber nach, dass es nur alle drei Elemente in und aus zur gleichen Zeit verblasst. Ist es möglich, es nach jeder Schleife zu staffeln?

Wenn Sie weitere Informationen benötigen, lassen Sie es mich bitte wissen.

Danke!

Answer 1

Sie müssen nur die ganze Animation Dauer mit allen Verzögerungen berechnen und dementsprechend wie folgt festgelegt:

.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/