Wifeo Creative Code

<<< back to homepage for others creatives tricks

CSS ANIMATION LOCATION

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

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

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

.anim
{
  position: absolute;
  top:200px;
  -webkit-animation:spin 2s linear;
  -webkit-animation-fill-mode: both;
  -webkit-transform-origin: 50% 100%;
  -moz-animation:spin 2s linear;
  -moz-animation-fill-mode: both;
  -moz-transform-origin: 50% 100%;
  -ms-animation:spin 2s linear;
  -ms-animation-fill-mode: both;
  -ms-transform-origin: 50% 100%;
  animation:spin 2s linear;
  animation-fill-mode: both;
  transform-origin: 50% 100%;
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg) scaleY(0.6);top:-130px;}
  20% {-webkit-transform: rotate(-2deg) scaleY(1.05);top:200px;}
  35% {-webkit-transform: rotate(2deg) scaleY(1);}
  50% {-webkit-transform: rotate(-2deg);} 
  65% {-webkit-transform: rotate(1deg);} 
  80% {-webkit-transform: rotate(-1deg);}   
  100% {-webkit-transform: rotate(-20deg);}   
}
@-moz-keyframes spin {
  0% {-moz-transform: rotate(0deg) scaleY(0.6);top:-130px;}
  20% {-moz-transform: rotate(-2deg) scaleY(1.05);top:200px;}
  35% {-moz-transform: rotate(2deg) scaleY(1);}
  50% {-moz-transform: rotate(-2deg);} 
  65% {-moz-transform: rotate(1deg);} 
  80% {-moz-transform: rotate(-1deg);}   
  100% {-moz-transform: rotate(-20deg);}   
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(0deg) scaleY(0.6);top:-130px;}
  20% {-ms-transform: rotate(-2deg) scaleY(1.05);top:200px;}
  35% {-ms-transform: rotate(2deg) scaleY(1);}
  50% {-ms-transform: rotate(-2deg);} 
  65% {-ms-transform: rotate(1deg);} 
  80% {-ms-transform: rotate(-1deg);}   
  100% {-ms-transform: rotate(-20deg);}   
}
@-keyframes spin {
  0% {transform: rotate(0deg) scaleY(0.6);top:-130px;}
  20% {transform: rotate(-2deg) scaleY(1.05);top:200px;}
  35% {transform: rotate(2deg) scaleY(1);}
  50% {transform: rotate(-2deg);} 
  65% {transform: rotate(1deg);} 
  80% {transform: rotate(-1deg);}   
  100% {transform: rotate(-20deg);}   
}
.ombre_bleu
{
  border-radius:30px;
  display:inline-block;
  background-color:rgba(153,153,153,0.2);
  box-shadow:1px 1px 8px #999999;
  margin-left:90px;
  -webkit-animation:anim_ombre 2s linear;
  -webkit-animation-fill-mode: both;
  -moz-animation:anim_ombre 2s linear;
  -moz-animation-fill-mode: both;
  -ms-animation:anim_ombre 2s linear;
  -ms-animation-fill-mode: both;
  animation:anim_ombre 2s linear;
  animation-fill-mode: both;
} 
@-webkit-keyframes anim_ombre
{
  0%{width:90px;height:2px;}
  20%{width:30px;height:2px;}
  90%{width:30px;height:2px;}
  100%{margin-left:0px;width:90px;height:2px;}
} 
@-moz-keyframes anim_ombre
{
  0%{width:90px;height:2px;}
  20%{width:30px;height:2px;}
  90%{width:30px;height:2px;}
  100%{margin-left:0px;width:90px;height:2px;}
} 
@-ms-keyframes anim_ombre
{
  0%{width:90px;height:2px;}
  20%{width:30px;height:2px;}
  90%{width:30px;height:2px;}
  100%{margin-left:0px;width:90px;height:2px;}
} 
@keyframes anim_ombre
{
  0%{width:90px;height:2px;}
  20%{width:30px;height:2px;}
  90%{width:30px;height:2px;}
  100%{margin-left:0px;width:90px;height:2px;}
}

HTML CODE :

<div align="center" style="position:relative; height:320px;">
 <img src="http:YOUR-URL-IMAGE.png" height="130" class="anim">
</div>
<div align="center">
  <div class="ombre_bleu"></div>
</div>