Wifeo Creative Code

<<< back to homepage for others creatives tricks

PURE CSS INTRO ANIMATION

PURE CSS3 INTRO ANIMATION

WWW.WIFEO.COM /CODE

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

     
    <p data-height="360" data-theme-id="9277" data-slug-hash="AiEBr" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/AiEBr'>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/34-pure-css-intro-animation.html">wifeo/code</a></div>

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

.conteneur
{
  background: -webkit-radial-gradient(center, rgb(50, 50, 50) 0%, rgb(14, 14, 14) 100%);
  background: -moz-radial-gradient(center, rgb(50, 50, 50) 0%, rgb(14, 14, 14) 90%);
  background: -ms-radial-gradient(center, rgb(50, 50, 50) 0%, rgb(14, 14, 14) 100%);
  background: -o-radial-gradient(center, rgb(50, 50, 50) 0%, rgb(14, 14, 14) 100%);
  background: radial-gradient(circle at 50% 50%, rgb(50, 50, 50) 0%, rgb(14, 14, 14) 100%);
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.top{
  width:200px;
  height:120px;
  position:absolute;
  margin-left:-100px;
  left: 50%;
  bottom: 51%;
  overflow: hidden;
  -webkit-animation:spin 0.8s linear;
  -webkit-animation-fill-mode: both;
  -moz-animation:spin 0.8s linear;
  -moz-animation-fill-mode: both;
  -ms-animation:spin 0.8s linear;
  -ms-animation-fill-mode: both;
  animation:spin 0.8s linear;
  animation-fill-mode: both;
}
.pure{

  height:25px;
  position:absolute;
  margin-left:-200px;
  left: 50%;
  top: 51%;
  overflow: hidden;
   font-family:'Electrolize'; font-size:25px; color:#0e0e0e;
   border-right:2px solid #7CDD26;
  -webkit-animation-delay: 1s;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: spin1;
  -moz-animation-delay: 1s;
  -moz-animation-duration: 1s;
  -moz-animation-fill-mode: both;
  -moz-animation-name: spin1;
  -ms-animation-delay: 1s;
  -ms-animation-duration: 1s;
  -ms-animation-fill-mode: both;
  -ms-animation-name: spin1;
  animation-delay: 1s;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: spin1;
}
.link{

  height:20px;
  position:absolute;
  margin-top:30px;
  margin-left:-200px;
  left: 50%;
  top: 51%;
  overflow: hidden;
   font-family:'Electrolize'; font-size:16px; color:#7CDD26;
   border-right:2px solid #7CDD26;
  -webkit-animation-delay: 2s;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: spin2;
  -moz-animation-delay: 2s;
  -moz-animation-duration: 1s;
  -moz-animation-fill-mode: both;
  -moz-animation-name: spin2;
  -ms-animation-delay: 2s;
  -ms-animation-duration: 1s;
  -ms-animation-fill-mode: both;
  -ms-animation-name: spin2;
  animation-delay: 2s;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: spin2;
}
.contener
{
  padding-top:400px;
}
@-webkit-keyframes spin 
{0% {height:0px;}100% {height:170px;}}
@-webkit-keyframes spin1 
{0% {width:0px;border-right:0px;}
  1% {width:0px;border-right:2px solid #7CDD26;}
  99% {width:400px;border-right:2px solid #7CDD26;}
  100% {width:400px;border-right:0px;}}
@-webkit-keyframes spin2
{0% {width:0px;border-right:0px;}
  1% {width:0px;border-right:2px solid #7CDD26;}
  99% {width:200px;border-right:2px solid #7CDD26;}
  100% {width:200px;border-right:0px;}}
@-moz-keyframes spin 
{0% {height:0px;}100% {height:170px;}}
@-moz-keyframes spin1 
{0% {width:0px;border-right:0px;}
  1% {width:0px;border-right:2px solid #7CDD26;}
  99% {width:400px;border-right:2px solid #7CDD26;}
  100% {width:400px;border-right:0px;}}
@-moz-keyframes spin2
{0% {width:0px;border-right:0px;}
  1% {width:0px;border-right:2px solid #7CDD26;}
  99% {width:200px;border-right:2px solid #7CDD26;}
  100% {width:200px;border-right:0px;}}
@-ms-keyframes spin 
{0% {height:0px;}100% {height:170px;}}
@-ms-keyframes spin1 
{0% {width:0px;border-right:0px;}
  1% {width:0px;border-right:2px solid #7CDD26;}
  99% {width:400px;border-right:2px solid #7CDD26;}
  100% {width:400px;border-right:0px;}}
@-ms-keyframes spin2
{0% {width:0px;border-right:0px;}
  1% {width:0px;border-right:2px solid #7CDD26;}
  99% {width:200px;border-right:2px solid #7CDD26;}
  100% {width:200px;border-right:0px;}}
@keyframes spin 
{0% {height:0px;}100% {height:170px;}}
@keyframes spin1 
{0% {width:0px;border-right:0px;}
  1% {width:0px;border-right:2px solid #7CDD26;}
  99% {width:400px;border-right:2px solid #7CDD26;}
  100% {width:400px;border-right:0px;}}
@keyframes spin2
{0% {width:0px;border-right:0px;}
  1% {width:0px;border-right:2px solid #7CDD26;}
  99% {width:200px;border-right:2px solid #7CDD26;}
  100% {width:200px;border-right:0px;}}

HTML CODE :

<div align="center" style="position:relative;" class="conteneur">
  <div class="contener" align="left">
    <div class="top"><img src="http:YOUR-URL-IMAGE.png"></div>
    <div class="pure">PURE CSS3 INTRO ANIMATION</div>
    <div class="link">WWW.WIFEO.COM /CODE</div>
  </div>
</div>