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

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