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

#test p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

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

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Example 3: fade in css

<style>
.fade-css-example {
  animation: fade-animation-example ease 10s;
}

@keyframes fade-animation-example {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
</style>
<div class="fade-css-example">
   <img src="image (1).jpg">
</div>

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

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;

    -webkit-transition: opacity 2s ease-in;
       -moz-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
         -o-transition: opacity 2s ease-in;
            transition: opacity 2s ease-in;
}

#test p.load {
    opacity: 1;
}

Example 6: animation fade in css

document.getElementById("test").children[0].className += " load";