how to make an image fade in and out in css code example
Example 1: how to fade out images html css
.fade-out { animation: fadeOut ease 8s; -webkit-animation: fadeOut ease 8s; -moz-animation: fadeOut ease 8s; -o-animation: fadeOut ease 8s; -ms-animation: fadeOut ease 8s;}@keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; }}@-moz-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; }}@-webkit-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; }}@-o-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; }}@-ms-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0;}
Example 2: css fade out
.successfully-saved {
color: #FFFFFF;
text-align: center;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-ms-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
opacity: 1;
}
.successfully-saved.hide-opacity {
opacity: 0;
}