CSS Typing Animation

CSS Typing Animation

by stevenkaspar

HTML

<span class="typing-dots">
  <span class="typing-dot-1"></span>
  <span class="typing-dot-2"></span>
  <span class="typing-dot-3"></span>
</span>

SCSS

$base-bg:       #ccc;
$highlight-bg:  #444;
$size:          4px;
$interval-time: 1500ms;

.typing-dots {
  span {
    display: inline-block;
    width: $size;
    height: $size;
    border-radius: 50%;
    background: $base-bg;
    -webkit-animation: typing #{$interval-time} infinite;
    animation: typing #{$interval-time} infinite;
  }
  .typing-dot-1{
    -webkit-animation-delay: 0ms;
    animation-delay: 0s;
  }
  .typing-dot-2{
    -webkit-animation-delay: $interval-time - ($interval-time / 3)*2;
    animation-delay: $interval-time - ($interval-time / 3)*2;
  }
  .typing-dot-3{
    -webkit-animation-delay: $interval-time - ($interval-time / 3);
    animation-delay: $interval-time - ($interval-time / 3);
  }
}

@-webkit-keyframes typing {
  0%   {background: $base-bg;}
  32%  {background: $base-bg;}
  33%  {background: $highlight-bg;}
  65%  {background: $highlight-bg;}
  66%  {background: $base-bg;}
  100%  {background: $base-bg;}
}

@keyframes typing {
  0%   {background: $base-bg;}
  32%  {background: $base-bg;}
  33%  {background: $highlight-bg;}
  65%  {background: $highlight-bg;}
  66%  {background: $base-bg;}
  100%  {background: $base-bg;}
}