錯開的無限CSS動畫

Question

我想知道是否有可能在每次動畫完成一個完整循環時出現錯開的循環動畫？

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

正如你可以從代碼中看到，它是目前錯開第一次經歷的動畫，但之後，它只是淡入和淡出的所有3種元素在同一時間。是否有可能讓它在每個循環之後錯開？

如果您需要更多信息，請讓我知道。

謝謝！

Answer 1

你只需要與所有的延遲計算整個動畫的持續時間，並相應設置它們是這樣的：

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

小提琴：https://jsfiddle.net/2u43tc8z/2/