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