April 15, 2014 5:35 am

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.

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

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.


CodePen Demo

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.

Tutorial Categories:
  • F_Commonsens

    Excellent! Bravo!

  • Doaa Ahmed

    Thank you so much , but i have a question how about if i just want it to fade once and then stop from fading ?