How to create fade-in fade-out effect on text using CSS 3 Animation

232

Today I am going to write this tutorial to how you can give a fade-in and fade-out effect to any text using CSS 3 Animation. Its a very simple and easy to understand, basically I am using keyframe ( using @keyframes rule, you can create animations ). I have created a 7 characters fade-in and fade-out one by one and you can use this effect for your loading effect to show that some thing happening on backend.

DEMO
Let see on our HTML and CSS