rNaMoGb

index.html

<a class="notifications blink" data-number="1">
	<span class="icon"></span>
</a>

<a class="notifications blink" data-number="2">
	<span class="icon"></span>
	<span class="icon"></span>
</a>

<a class="notifications blink" data-number="3">
	<span class="icon"></span>
	<span class="icon"></span>
	<span class="icon"></span>
</a>

<a class="notifications blink" data-number="4">
	<span class="icon"></span>
	<span class="icon"></span>
	<span class="icon"></span>
	<span class="icon"></span>
</a>

<a class="notifications blink" data-number="5">
	<span class="icon"></span>
	<span class="icon"></span>
	<span class="icon"></span>
	<span class="icon"></span>
	<span class="icon"></span>
</a>

<a class="notifications blink" data-number="6">
	<span class="icon"></span>
	<span class="icon"></span>
	<span class="icon"></span>
	<span class="icon"></span>
	<span class="icon"></span>
	<span class="icon"></span>
</a>

rnamogb.markdown

rNaMoGb

A Pen by Yahav on CodePen.

License.

style.scss

$container-class-name: notifications;
$icons-class-name: icon;

$max-icons: 6;
$ainmation-name: blink;
$ainmation-class-name: blink;
$animation-speed: 40; //half blink animation duration (1%-50%)
$animation-duration: 2; //one blink animation duration (show+hide)

//to position icons on top of each other
.#{$container-class-name} {
  position: relative;
}
.#{$container-class-name} .#{$icons-class-name} {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

@for $i from 1 through $max-icons {
  
  /* ---------------- #{$ainmation-name+$i} ------------------ */
  
  .#{$ainmation-class-name}[data-number="#{$i}"]  .#{$icons-class-name} {
    animation-name: #{$ainmation-name+$i};
    animation-duration: #{$i*$animation-duration}s;
    animation-iteration-count: infinite;
  }
  
  @for $j from 1 through $i {
    .#{$ainmation-class-name}[data-number="#{$i}"] .#{$icons-class-name}:nth-child(#{$j}) {
      animation-delay: #{$animation-duration*($j - 1)}s;
    }
  }
  
  //Standard syntax
  @keyframes #{$ainmation-name+$i} {
    #{($animation-speed/$i)*1%}  {opacity: 1;}
    #{(2*$animation-speed/$i)*1%}  {opacity: 0;}
  }
}



/* FOR THE DEMO ONLY! */
.#{$container-class-name} {
  display: inline-block;
  width: 50px;
  height: 50px;
}

.#{$container-class-name} .#{$icons-class-name}:nth-child(1){
  background-color: red;
}

.#{$container-class-name} .#{$icons-class-name}:nth-child(2){
  background-color: blue;
}

.#{$container-class-name} .#{$icons-class-name}:nth-child(3){
  background-color: yellow;
}

.#{$container-class-name} .#{$icons-class-name}:nth-child(4){
  background-color: green;
}

.#{$container-class-name} .#{$icons-class-name}:nth-child(5){
  background-color: pink;
}

.#{$container-class-name} .#{$icons-class-name}:nth-child(6){
  background-color: purple;
}