Text Fade in and Fade Out Using CSS Animation | CSS tips and tricks | #SmartCode

#css #html #cssanimation
In this tutorial I am shoiwing you guys how to create a very simple text fade in and out effects using css animation. I hope you like the video.
Thanks for watching!
#SmartCode

▶ Cross Browser Issue:
Use following css to get you animation work on most of the browser.

@keyframes fade-inout {
0%{ opacity: 1;}
100%{ opacity: 0;}
}
/* support for opera */
@-o-keyframes fade-inout{
0%{ opacity: 1;}
100%{ opacity: 0;}
}
/* support for mozila */
@-moz-keyframes fade-inout{
0%{ opacity: 1;}
100%{ opacity: 0;}
}
/* support for safari and chrome */
@-webkit-keyframes fade-inout{
0%{ opacity: 1;}
100%{ opacity: 0;}
}
.fade-in-fade-out {
-webkit-animation: fade-inout 5s infinite alternate;
-moz-animation: fade-inout 5s infinite alternate;
-o-animation: fade-inout 5s infinite alternate;
animation: fade-inout 5s infinite alternate;
}
Other interesting CSS tips and tricks:

▶ How to make an image and a div the same size | CSS tips and tricks | #SmartCode

▶ Text Fade in and Fade Out Using CSS Animation | CSS tips and tricks | #SmartCode

▶ How To Create Tooltip Using CSS | CSS tips and tricks | #SmartCode

[outrageousthoughts-kjcm]

Thanks a lot! I was searching for this type of tutorial for a very long time!

[acediakiana]

thank you for the video
not only for the tutorial, but also the explanation

[bxnewdk]

Ty that was simple but can help me so much

[emreozgun]

would make sense with forwards. not with alternate + infinite thanks nonetheless...

[izukendkuruko]

Hello, what should we modify to only show the text?

[Meina]

I did exactly the same, but why mine didn't work ;0;?

[BasilVRey]

How can i connect this to scrolling on a page?