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


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.

Let see on our HTML and CSS

Above HTML create 7 characters LOADING this will fade-in and fade-out.


Above CSS uses to fade-in fade-out each character and change opacity to 0.2; in keyframe fade, .letter:nth-child(1)  points to first character and all above nth-child points to each character. This effect takes 4 seconds to complete.

That’s All for today’s tutorial I hope you like it please feel free to comment your suggestions and feedback