CSS animations - fade in/out text

Have you ever wanted to make a fade in animation of any element in your website? For instance something like this:

If yes, you are in the right place. It's very easy and to make this animation on your website put these lines in your style sheet:

 .ct-animate-fadein { animation: fadeInAnimation ease 2.5s; animation-iteration-count: 1; animation-fill-mode: both; } @keyframes fadeInAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } 

Maybe you want to fade out?

The same you can do when you want to make a fade out animation. Just reverse the opacity in keyframes:

 @keyframes fadeOutAnimation { 0% { opacity: 1; } 100% { opacity: 0; } } 

It would be great if you will comment or follow me on social media:

Also you can visit my websites:

• Linux blog
• Web Agency website