Lights!- CSS Text Animation

index.html

<div class="container">
  <div class="row">
    <div class="col">
      <p class="text-uppercase text-center">
        <span class="c">c</span>
        <span class="u">u</span>
        <span class="r">r</span>
        <span class="l">l</span>
        <span class="e">e</span>
        <span class="y">y</span>
        <span class="w">w</span>
        <span class="e2">e</span>
        <span class="b">b</span>
        <span class="d">d</span>
        <span class="e3">e</span>
        <span class="v">v</span></p>
    </div>
  </div>
</div>

Lights.markdown

CSS Text Animation

License.

style.css

@import url('https://fonts.googleapis.com/css?family=Orbitron:400,700,900');
body {
  background: black;
  
}

p {
  color: #121212;
  margin-top: 300px;
  font-size: 4.1em;
  letter-spacing: -9px;
  font-family: 'Orbitron', sans-serif;
  font-weight: black;
}

.c {
  animation: light 300ms ease-in-out, light2 200ms linear forwards 3.5s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8s;
}

.u {
  animation: light 300ms ease-in-out 300ms, light2 200ms linear forwards 3.7s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8.1s;
}

.r {
  animation: light 300ms ease-in-out 600ms, light2 200ms linear forwards 3.9s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8.2s;
}

.l {
  animation: light 300ms ease-in-out 900ms, light2 200ms linear forwards 4.1s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8.3s;
}

.e {
  animation: light 300ms ease-in-out 1.2s, light2 200ms linear forwards 4.3s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8.4s;
}

.y {
  animation: light 300ms ease-in-out 1.5s, light2 200ms linear forwards 4.5s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8.5s;
}

.w {
  animation: light 300ms ease-in-out 1.8s, light2 200ms linear forwards 4.7s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8.6s;
}

.e2 {
  animation: light 300ms ease-in-out 2.1s, light2 200ms linear forwards 4.9s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8.7s;
}

.b {
  animation: light 300ms ease-in-out 2.4s, light2 200ms linear forwards 5.1s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8.8s;
}

.d {
  animation: light 300ms ease-in-out 2.7s, light2 200ms linear forwards 5.3s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8.9s;
}

.e3 {
  animation: light 300ms ease-in-out 3s, light2 200ms linear forwards 5.5s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 9s;
}

.v {
  animation: light 300ms ease-in-out 3.3s, light2 200ms linear forwards 5.7s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 9.1s;
}

@keyframes light {
  from {
    color: pink;
    text-shadow: 0 0 3px white, 0 0 7px red, 0 0 20px red;
    filter: drop-shadow(0 0 25px red);
    -webkit-text-stroke: 2px red;
  }
  to {
    color: inherit;
    text-shadow: none;
    filter: drop-shadow(0 0 0 red);
  }
}

@keyframes light2 {
  from {
    color: inherit;
    text-shadow: none;
    filter: drop-shadow(0 0 0 red);
    -webkit-text-stroke: black;
  }
  to {
    color: pink;
    text-shadow: 0 0 1px white, 0 0 3px white, 0 0 7px white, 0 0 20px red;
    filter: drop-shadow(0 0 25px red);
    -webkit-text-stroke: 2px red;
  }
}

@keyframes dark {
  0% {
    color: pink;
    text-shadow: 0 0 3px white, 0 0 7px white, 0 0 20px red;
    filter: drop-shadow(0 0 25px red);
    -webkit-text-stroke: 2px red;
  }
  25% {
    color: inherit;
    text-shadow: none;
    filter: drop-shadow(0 0 0 black);
    -webkit-text-stroke: black;
  }
}

@keyframes hue {
  from {
    filter: hue-rotate(0deg) drop-shadow(0 0 25px red);
  }
  to {
    filter: hue-rotate(360deg) drop-shadow(0 0 25px red);
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />