Cursor Animations

A bunch of cursor animations.

HTML

<div class="line">
  :: Somewhere I Belong - Linkin Park ::
</div>
<div class="line">&nbsp;</div>
<div class="line">
  (When this bega<div class="cursor blink slow"></div>
</div>
<div class="line">
  I had nothing to s<div class="cursor smooth slow"></div>
</div>
<div class="line">
  And I get lost in the nothingness insi<div class="cursor phase slow"></div>
</div>
<div class="line">
  (I was confus<div class="cursor expand slow"></div>
</div>
<div class="line">
  And I let it all out to fin<div class="cursor solid slow"></div>
</div>

CSS

body {
  font-family: "Menlo", "Monaco", "Courier New", "Courier";
  font-size: 9pt;
  background-color: black;
  color: #fff;
}

.line {
  line-height: 18px;
  background-color: #333;
  overflow: hidden;
  margin: 2px;
  vertical-align: middle;
}

.cursor {
  position: relative;
  top: 2px;
  width: 2px;
  height: 14px;
  background-color: #eee;
  display: inline-block;
  margin-left: 1px;
  margin-right: 1px;
}

@keyframes blink {
  0%,
  49% {
    opacity: 0;
  }
  51%,
  100% {
    opacity: 1;
  }
}

@keyframes smooth {
  0%,
  20% {
    opacity: 0;
  }
  60%,
  100% {
    opacity: 1;
  }
}

@keyframes phase {
  0%,
  20% {
    opacity: 0;
  }
  90%,
  100% {
    opacity: 1;
  }
}

@keyframes expand {
  0%,
  20% {
    transform: scaleY(0);
  }
  80%,
  100% {
    transform: scaleY(1);
  }
}

.blink {
  animation: blink 0.3s ease-in-out 0s infinite alternate;
}

.smooth {
  animation: smooth 0.3s ease-in-out 0s infinite alternate;
}

.phase {
  animation: phase 0.3s ease-in-out 0s infinite alternate;
}

.expand {
  animation: expand 0.3s ease-in-out 0s infinite alternate;
}

.slow {
  animation-duration: 0.5s;
}