Blink effect - with typing

by Julien Roche

HTML

<span class="element-to-type"></span>
<span class="element-to-blink">|</span>

CSS

.element-to-type {
  color: #09b507;
  font-size: 5rem;
  font-weight: bold;
}

.element-to-type:after {
  animation: 5s infinite 500ms alternate typing;
  content: '';
}

.element-to-blink {
  animation: 1s ease infinite reverse blink;
  color: #09b507;
  font-size: 5rem;
  font-weight: bold;
}

@keyframes typing {
  0% {
    content: '';
  }
  
  20% {
    content: 'a';
  }
  
  40% {
    content: 'ab';
  }
  
  60% {
    content: 'abc';
  }
  
  80% {
    content: 'abcd';
  }
  
  100% {
    content: 'abcde';
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  
  50% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}