Template:Typing Text Effect/styles.css

/* Template:Typing Text Effect/styles.css */

/* Container with blinking cursor effect */
.cursor {
  position: relative;
  width: 24em;
  margin: 0 auto;
  border-right: 2px solid rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);
  display: inline-block;
}

/* Typewriter animation */
.typewriter-animation {
  animation:
    typewriter 5s steps(50, end) 1s 1 normal both,
    blinkingCursor 500ms steps(50, end) infinite normal;
}

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blinkingCursor {
  from { border-right-color: rgba(255, 255, 255, 0.75); }
  to { border-right-color: transparent; }
}