.cursor{
    position: relative;
    display: inline-block;
    width: 11em;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 16px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.typewriter-animation {
  animation: 
    typewriter 2s steps(50) 1s 1 normal both,
    blinkingCursor 500ms steps(50) 10 normal, 
    hideCursor 0s 3.5s 1 forwards;
}

@keyframes hideCursor {
  to {
    border-right-color: transparent;
  }
}

@keyframes typewriter {
  from { width: 0; }
  to { width: 11em; }
}
@keyframes blinkingCursor{
  from { border-right-color: rgba(255,255,255,.75); }
  to { border-right-color: transparent; }
}