奇妙なアニメーションではなく、どのようにアニメーションを「脈拍」にすることができますか？

Question

今までの私のアニメーションは、それぞれの奇妙な要素を「パルス」し、偶数要素に切り替えます。

シーケンス内の各要素が1つずつ順番にパルスするという効果を得たいと思います。ここで

は、私がこれまで持っているものです：

.pulse-through { 
    span { 
     display: inline-block; 
     @include animation('pulse 0.4s alternate infinite ease-in-out'); 

     &:nth-child(odd) { 
      animation-delay: 0.4s; 
     } 
    } 
} 

/* KEYFRAME ANIMATIONS */ 
@include keyframes(pulse) { 
    to { 
     @include transform(scale(0.8)); 
     opacity: 0.5; 
    } 
} 

私は通常のCSSの変換やアニメーションですが、各ブラウザのために、それを簡単にするために含まれています。

Answer 1

することは、このような何か試してみてください：より効率的な方法があるに違いありません

.pulse-through { 
    span { 
     display: inline-block; 
     @include animation('pulse 0.4s alternate infinite ease-in-out'); 

     @for $i from 1 through 20 { 
      // limit the amount by some count, or try another way 
      // if that doesn't work 
      &:nth-child(#{$i}) { 
       animation-delay: ($i * 0.2s); 
      } 
     } 
    } 
}