area-51/css/animate1.css

/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

/* Cursor */
.cursor{
    position: relative;
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 30px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    
}
/* Animation */
.typewriter-animation {
  animation: 
    typewriter 5s steps(50) 1s 1 normal both, 
    blinkingCursor 500ms steps(50) infinite normal;
}

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

.typewriter-animation2 {
  animation: 
    typewriter 5s steps(100) 10s 1 normal both, 
    blinkingCursor 500ms steps(100) infinite normal;
}

.typewriter-animation3 {
  animation: 
    typewriter 5s steps(100) 15s 1 normal both, 
    blinkingCursor 500ms steps(100) infinite normal;
}

.typewriter-animation4 {
  animation: 
    typewriter 5s steps(100) 20s 1 normal both, 
    blinkingCursor 500ms steps(100) infinite normal;
}

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

/* Global */
.note { margin-top: 0em; padding: 2em; color: #ffffff; font-family: 'Anonymous Pro', monospace; text-shadow: 0px 0px 10px #000000;}