Today, we teach you how to create a CSS neon animation. So, Let’s get started.

01. Building HTML Structure

As for our HTML we need the following structure:

<div class="container">
  <div class="text">
    <b>100 s<span>u</span>bs</b>
  </div>
</div>

We are going to use the container to center everything and use the span to make a cool neon glitch.

02. Picking Font

First we are going to import a cool Google font, which looks like it could be used in Neon letters.

@import url(//fonts.googleapis.com/css?family=Pacifico);

The on to our Neon effect!

.text b {
  font: 400 25vh 'Pacifico';
  letter-spacing: -5px;
  color: #fee;
  text-shadow: 0 0px 10px, 0 0 1em #560a86, 0 0 0.5em #560a86, 0 0 0.1em #560a86,
    0 10px 3px #333;
}

As you see, we are setting our font to be the Google Font, and making it a font-weight of 25vh (25% Viewport Height.

Then we are using the text-shadow to make it show as Neon. We add multiple glow “layers” and end with a dark grey to make it appear thicker.

Note: You can use a cool tool like this for creating text-shadows.

03. Now lets talk about Animation

We added a glitch on the u letter. This is common in Neon, and we can re-create this using CSS Animations.

.text b span {
  animation: flicker linear infinite 2s;
}

@keyframes flicker {
  75% {
    color: inherit;
    text-shadow: inherit;
  }
  76% {
    color: #222;
  }
  77% {
    color: inherit;
    text-shadow: none;
  }
  78% {
    color: inherit;
    text-shadow: inherit;
  }
  79% {
    color: #222;
    text-shadow: none;
  }
  80% {
    color: inherit;
    text-shadow: inherit;
  }
  90% {
    color: #222;
    text-shadow: none;
  }
  90.5% {
    color: inherit;
    text-shadow: inherit;
  }
}

The actual animation is a mix of resetting the color and removing the text-shadow for a split second; this gives it the appeal of flickering.

Conclusion

Animation Code Css CSS3 Development HTML & CSS Tutorials Web Development