Generated by SassMeister.com.

SassMeister-input-HTML.html

Loading <span class="dots"><span>.</span><span>.</span><span>.</span></span>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

@import "compass";
@include keyframes(dots-1) { 
  from { opacity: 0; } 25% { opacity: 1; } 
}
@include keyframes(dots-2) { 
  from { opacity: 0; } 50% { opacity: 1; }
}
@include keyframes(dots-3) {
  from { opacity: 0; } 75% { opacity: 1; }
}

.dots span {
    @include animation(dots-1 1s infinite steps(1));
}

.dots span:first-child + span {
    @include animation-name(dots-2);
}

.dots span:first-child + span + span {
    @include animation-name(dots-3);
}

SassMeister-output.css

@-moz-keyframes dots-1 {
  from {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }
}
@-webkit-keyframes dots-1 {
  from {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }
}
@keyframes dots-1 {
  from {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }
}
@-moz-keyframes dots-2 {
  from {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}
@-webkit-keyframes dots-2 {
  from {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}
@keyframes dots-2 {
  from {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}
@-moz-keyframes dots-3 {
  from {
    opacity: 0;
  }

  75% {
    opacity: 1;
  }
}
@-webkit-keyframes dots-3 {
  from {
    opacity: 0;
  }

  75% {
    opacity: 1;
  }
}
@keyframes dots-3 {
  from {
    opacity: 0;
  }

  75% {
    opacity: 1;
  }
}
.dots span {
  -moz-animation: dots-1 1s infinite steps(1);
  -webkit-animation: dots-1 1s infinite steps(1);
  animation: dots-1 1s infinite steps(1);
}

.dots span:first-child + span {
  -moz-animation-name: dots-2;
  -webkit-animation-name: dots-2;
  animation-name: dots-2;
}

.dots span:first-child + span + span {
  -moz-animation-name: dots-3;
  -webkit-animation-name: dots-3;
  animation-name: dots-3;
}

SassMeister-rendered.html

Loading <span class="dots"><span>.</span><span>.</span><span>.</span></span>