Glowing text animation

glowing-text-animation.markdown

Glowing text animation

A Pen by James on CodePen.

License.

index.html

<h1>
  <span>w</span>
  <span>w</span>
  <span>2</span>
  <span>.</span>
  <span>j</span>
  <span>a</span>
  <span>m</span>
  <span>e</span>
  <span>s</span>
  <span>a</span>
  <span>u</span>
  <span>b</span>
  <span>l</span>
  <span>e</span>
  <span>.</span>
  <span>c</span>
  <span>o</span>
  <span>m</span>
</h1>

style.css

@import url('https://fonts.googleapis.com/css?family=Caveat:400,700|Gochi+Hand');

body{
  background: #000;
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

h1{
  font-size: 3em;
  font-family: 'Caveat', cursive;
}

h1 span{
  display: block;
  float: left;
  animation: animate 4.5s linear infinite;
  margin: 0 5px;
  padding: 0;
  position: relative;
  color: #111;
}

h1 span:nth-child(1){
  animation-delay: 0s;
}
h1 span:nth-child(2){
  animation-delay: .25s;
}
h1 span:nth-child(2){
  animation-delay: .5s;
}
h1 span:nth-child(3){
  animation-delay: .75s;
}
h1 span:nth-child(4){
  animation-delay: 1s;
}
h1 span:nth-child(5){
  animation-delay: 1.25s;
}
h1 span:nth-child(6){
  animation-delay: 1.5s;
}
h1 span:nth-child(7){
  animation-delay: 1.75s;
}
h1 span:nth-child(8){
  animation-delay: 2s;
}
h1 span:nth-child(9){
  animation-delay: 2.25s;
}
h1 span:nth-child(10){
  animation-delay: 2.5s;
}
h1 span:nth-child(11){
  animation-delay: 2.75s;
}
h1 span:nth-child(12){
  animation-delay: 3s;
}

h1 span:nth-child(13){
  animation-delay: 3.25s;
}
h1 span:nth-child(14){
  animation-delay: 3.5s;
}
h1 span:nth-child(15){
  animation-delay: 3.75s;
}
h1 span:nth-child(16){
  animation-delay: 4s;
}
h1 span:nth-child(17){
  animation-delay: 4.25s;
}
h1 span:nth-child(18){
  animation-delay: 4.5s;
}




@keyframes animate {
  0%, 25%, 100%{
    color: #fff;
    filter: blur(2px);
    text-shadow: 0 0 10px #00bbff,
      0 0 20px #00bbff,
      0 0 40px #00bbff,
      0 0 80px #00bbff,
      0 0 120px #00bbff,
      0 0 200px #00bbff,
      0 0 300px #00bbff,
      0 0 400px #00bbff;
  }
  5%, 95%{
    color: #111;
    filter: blur(0px);
    text-shadow: none;
  }
}