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

Описание: #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
   • How to make an image and a div the same si...  

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

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