Wifeo Creative Code

<<< back to homepage for others creatives tricks

PURE CSS3 INTRO ANIMATION

WELCOME

PRESS F5 TO REPLAY

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

     
    <p data-height="360" data-theme-id="9277" data-slug-hash="maAwB" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/maAwB'>Codepen</a>
<script async src="//codepen.io/assets/embed/ei.js"></script><div align="center">View source code on <a href="http://www.wifeo.com/code/25-pure-css3-intro-animation.html">wifeo/code</a></div>

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

.first_div
{
  background-color:#f28e84;
  width:200px; height:200px;
  padding: 10px;
  border-radius:50%;
  -webkit-animation: anim 0.7s 1 ease;
  -moz-animation: anim 0.7s 1 ease;
  -ms-animation: anim 0.7s 1 ease;
  animation: anim 0.7s 1 ease;
}
.second_div
{
  width:198px; height:198px;
  border:1px solid #ffffff;
  border-radius:50%;
  -webkit-animation:anim 1s 1 ease;
  -moz-animation:anim 1s 1 ease;
  -ms-animation:anim 1s 1 ease;
  animation:anim 1s 1 ease;
}
.img_div
{
  width:200px; height:200px;
  -webkit-animation:animuser 1s 1 ease;
  -moz-animation:animuser 1s 1 ease;
  -ms-animation:animuser 1s 1 ease;
  animation:animuser 1s 1 ease;
}
.txt_welcome
{
  font-size: 46px;
  font-weight: 300;
  color: #e84c3d;
  padding-top: 25px;
  -webkit-animation: animwelcome 1.7s 1 ease-in;
  -moz-animation: animwelcome 1.7s 1 ease-in;
  -ms-animation: animwelcome 1.7s 1 ease-in;
  animation: animwelcome 1.7s 1 ease-in;
}
.txt_user
{
  font-size: 22px;
  font-weight: 100;
  color: #e84c3d;
  -webkit-animation: animuser 1.9s 1 ease-in;
  -moz-animation: animuser 1.9s 1 ease-in;
  -ms-animation: animuser 1.9s 1 ease-in;
  animation: animuser 1.9s 1 ease-in;
}
.first_circle
{
  width: 220px; height: 220px; border-radius:50%;
  padding: 10px; margin-top: -12px;
  position: absolute; left: 50%; margin-left: -122px;
  border-top:2px solid #ffffff;
  border-right:2px solid #ffffff;
  border-bottom:2px solid #ffffff;
  border-left:2px solid #e84c3d;
  -webkit-animation:anim_wifeo 1.4s infinite linear;
  -moz-animation:anim_wifeo 1.4s infinite linear;
  -ms-animation:anim_wifeo 1.4s infinite linear;
  animation:anim_wifeo 1.4s infinite linear;
} 
@-webkit-keyframes anim
{
  0%{-webkit-transform:scale(0);}
  50%{-webkit-transform:scale(1.7);}
  100%{-webkit-transform:scale(1);}
}
@-moz-keyframes anim
{
  0%{-moz-transform:scale(0);}
  50%{-moz-transform:scale(1.7);}
  100%{-moz-transform:scale(1);}
}
@-ms-keyframes anim
{
  0%{-ms-transform:scale(0);}
  50%{-ms-transform:scale(1.7);}
  100%{-ms-transform:scale(1);}
}
@keyframes anim
{
  0%{transform:scale(0);}
  50%{transform:scale(1.7);}
  100%{transform:scale(1);}
}
@-webkit-keyframes animwelcome
{
  0%{-webkit-transform:scale(0);}
  50%{-webkit-transform:scale(0);}
  75%{-webkit-transform:scale(1.4);}
  100%{-webkit-transform:scale(1);}
}
@-moz-keyframes animwelcome
{
  0%{-moz-transform:scale(0);}
  50%{-moz-transform:scale(0);}
  75%{-moz-transform:scale(1.4);}
  100%{-moz-transform:scale(1);}
}
@-ms-keyframes animwelcome
{
  0%{-ms-transform:scale(0);}
  50%{-ms-transform:scale(0);}
  75%{-ms-transform:scale(1.4);}
  100%{-ms-transform:scale(1);}
}
@keyframes animwelcome
{
  0%{transform:scale(0);}
  50%{transform:scale(0);}
  75%{transform:scale(1.4);}
  100%{transform:scale(1);}
}
@-webkit-keyframes animuser
{
  0%{-webkit-transform:scale(0);}
  50%{-webkit-transform:scale(0);}
  75%{-webkit-transform:scale(1.4);}
  100%{-webkit-transform:scale(1);}
}
@-moz-keyframes animuser
{
  0%{-moz-transform:scale(0);}
  50%{-moz-transform:scale(0);}
  75%{-moz-transform:scale(1.4);}
  100%{-moz-transform:scale(1);}
}
@-ms-keyframes animuser
{
  0%{-ms-transform:scale(0);}
  50%{-ms-transform:scale(0);}
  75%{-ms-transform:scale(1.4);}
  100%{-ms-transform:scale(1);}
}
@keyframes animuser
{
  0%{transform:scale(0);}
  50%{transform:scale(0);}
  75%{transform:scale(1.4);}
  100%{transform:scale(1);}
}
@-webkit-keyframes anim_wifeo
{
  0%{-webkit-transform:rotate(0deg);} 
  50%{-webkit-transform:rotate(360deg);} 
  100%{-webkit-transform:rotate(720deg);}
}
@-moz-keyframes anim_wifeo
{
  0%{-moz-transform:rotate(0deg);} 
  50%{-moz-transform:rotate(360deg);} 
  100%{-moz-transform:rotate(720deg);}
}
@-ms-keyframes anim_wifeo
{
  0%{-ms-transform:rotate(0deg);} 
  50%{-ms-transform:rotate(360deg);} 
  100%{-ms-transform:rotate(720deg);}
}
@keyframes anim_wifeo
{
  0%{transform:rotate(0deg);} 
  50%{transform:rotate(360deg);} 
  100%{transform:rotate(720deg);}
}

HTML CODE :

<div align="center">
<div class="first_circle"></div>
<div class="first_div">
  <div class="second_div">
    <div class="img_div">
      <img src="http:YOUR-URL-IMAGE.png"></div>
    </div>
  </div>

<div class="txt_welcome">WELCOME</div>
<div class="txt_user">PRESS F5 TO REPLAY</div>
</div>