JSFiddle - React, Tailwind, and code Playground

by momenelkamri

HTML

<p class="demo"></div><a class="readmore" href="http://codeconvey.com/smooth-css-fade-in-on-page-load-animation/">Find More Details Here</a>
</p>
<div class="container">
      
    <div class="box animate fadeInUp one">
    	Fade in Up
    </div>

    <div class="box animate fadeInDown two">
    	Fade in Down
    </div>

    <div class="box animate fadeInLeft three">
    	Fade in Left
    </div>
  
    <div class="box animate fadeInRight four">
    	Fade in Right
    </div>
    
    <div class="box animate fadeIn five">
    	Fade in
    </div>
    
    <div class="box animate fadeInUpBig six">
    	Fade in Up Big
    </div>
    
    <div class="box animate fadeInDownBig seven">
    	Fade in Down Big
    </div>
    
    <div class="box animate fadeInRightBig eight">
    	Fade in Right Big
    </div>
    
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway);
body{
	background:#2c3e50;
}
/*=== Basic box styling  ===*/
.box {
    background: #2ecc71 none repeat scroll 0 0;
    color: white;
    float: left;
    font-family: "Raleway",sans-serif;
    font-size: 14px;
    font-weight: 600;
    height: 150px;
    line-height: 150px;
    margin: 1%;
    padding: 20px;
    text-align: center;
    text-transform: uppercase;
    width: 25%;
}

/*=== Trigger  ===*/
.animate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

  
/*=== Optional Delays, change values here  ===*/
.one {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}

.two {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}

.three {
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
animation-delay: 2.5s;
}

.four {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
animation-delay: 3.5s;
}

.five {
-webkit-animation-delay: 4.5s;
-moz-animation-delay: 4.5s;
animation-delay: 4.5s;
}

.six {
-webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
animation-delay: 5.5s;
}

.seven {
-webkit-animation-delay: 6.5s;
-moz-animation-delay: 6.5s;
animation-delay: 6.5s;
}

.eight {
-webkit-animation-delay: 7.5s;
-moz-animation-delay: 7.5s;
animation-delay: 7.5s;
}



/*=== Animations start here  ===*/

/*==== FADE IN UP ===*/
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}


/*===...