fade in out css code example

Example 1: css fade in

/* Just add .fade-in class to element */

.fade-in {
	animation: fadeIn 2s;
  	opacity: 1;
}

@keyframes fadeIn {
  from {
  	opacity: 0;
  }
  to {
 	opacity: 1;
  }
}

Example 2: 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 3: fade out in css animation

<html>
   <head>
      <style>
         .animated {
            background-image: url(/css/images/logo.png);
            background-repeat: no-repeat;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 10s;animation-duration: 10s;
            -webkit-animation-fill-mode: both;animation-fill-mode: both;
         }
         
         @-webkit-keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }
         
         @keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }
         
         .fadeOut {
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
         }
      </style>
   </head>

   <body>
   
      <div id = "animated-example" class = "animated fadeOut"></div>
      <button onclick = "myFunction()">Reload page</button>
      
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
      
   </body>
</html>

Tags:

Javascript Example

Recent Posts