千鳥の無限のCSSアニメーション

Question

アニメーションが1つの完全なループを完了するたびにジグザグするアニメーションをループさせることが可能かどうか疑問に思っていましたか？

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