css animation fade in and out 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: css fade out

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

.fade-out {
	animation: fadeOut 2s;
  	opacity: 0;
}

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

Example 3: css fade in and stay

.fadePopInAndStay {
	display: block;
	opacity: 0;
	visibility: visible;
	animation-name: doAnimStay;
	animation-duration: 2s;
	animation-fill-mode: forwards;/* Makes it stay after animation */
}
@-webkit-keyframes doAnimStay{
  0%   {opacity:0;}
  100% {opacity:1;}
}

Example 4: 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 5: css fade out

/* Answer to: "css fade out" */

/*
  With the code below, all you have to do is use JavaScript to
  give the element ".hide-opacity" and it'll fade-out.

  Feel free to edit this code so it works on hover, focus, active
  or any other special selector possible with CSS and of course
  feel free to use this code with your JavaScript too!
*/

.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;
}

Example 6: 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