PURE CSS ANIMATION RELOAD

by shatul patil

HTML

<div align="center" class="fond">
  
  
  
  <div align="center">
  <div class="top">
    <div style="position:absolute; bottom:0px; width:100%;" class="myfadeout">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/173024/reload.png" align="center" class="loading" />
    </div>
    <div class="myfadein">Hello World</div>
  </div>
  <div class="card" style="margin-top:70px;">
    
    <div style=" padding:5px; color:#999999; font-weight:300; font-size:30px; font-family:'Roboto';padding-top:20px;" align="center">PURE CSS <font style="font-weight:400;">ANIMATION RELOAD</font></div>
        <a href="http://www.wifeo.com/code" style="text-decoration:none;" target="parent"><div style="  color:#999999; font-weight:300; font-size:20px; font-family:'Roboto';" align="center">www.wifeo.com/code</div></a>
    
  </div>
  <div class="card"></div>
  <div class="circle"></div>
</div>
  
  
  
  
  
</div>

CSS

.fond
{
background-color:#f5f5f5;
  padding-top:20px;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index:-2;
  top: 0; bottom:0;
  left:0; right: 0;
}

.card
{
  width:90%;
  height:300px;
  background-color:#ffffff;
  margin:10px;
  padding: 20px;
  color:#666666;
  font-weight: 300;
  font-size: 36px;
  text-align: left;
  font-family: 'Roboto';
  box-shadow:0 0 2px #999999;
}
.circle
{
  width: 70px;
  height: 70px;
  background-color:#b11a44;
  border-radius: 50%;
  position: absolute;
  bottom: 40px;
  right: 20px;
  box-shadow: 1px 1px 8px #333333;
}
.top
{
  position: absolute;
  width: 100%;
  background-color:#b11a44;
  height: 60px;
  top:0px;
  -webkit-animation-duration: 2s;
  -webkit-animation-name: spin;
  -moz-animation-duration: 2s;
  -moz-animation-name: spin;
  -ms-animation-duration: 2s;
  -ms-animation-name: spin;
  animation-duration: 2s;
  animation-name: spin;
}
.loading
{
  -webkit-animation-delay: 0.3s;
  -webkit-animation-duration: 0.8s;
  -webkit-animation-name: load;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 2;
  -moz-animation-delay: 0.3s;
  -moz-animation-duration: 0.8s;
  -moz-animation-name: load;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: 2;
  -ms-animation-delay: 0.3s;
  -ms-animation-duration: 0.8s;
  -ms-animation-name: load;
  -ms-animation-timing-function: linear;
  -ms-animation-iteration-count: 2;
  animation-delay: 0.3s;
  animation-duration: 0.8s;
  animation-name: load;
  animation-timing-function: linear;
  animation-iteration-count: 2;
}
.myfadeout
{
  -webkit-animation-delay: 1.6s;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-name: disparition;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
  -moz-animation-delay: 1.6s;
  -moz-animation-duration: 0.5s;
  -moz-animation-name: disparition;
  -moz-animation-timing-function: linear;
  -moz-animation-fill-mode: both;
  -ms-animation-delay: 1.6s;
 ...