Samudrala Ramu Samudrala Ramu - 2 months ago 8
CSS Question

How To Roll A Img From Right To Left On Load Web Page

How to roll a this img right to left I dont have any idea about this please help me , sorry for my bad english .



img{
position:absolute;
top:50px;
right:5px;
width:100px;
height:100px;
border-radius:50%;
background:#ff00ff;

}

<img src="http://cdn.wallpapersafari.com/15/28/zMTLik.jpg" style="height:100px; width:100px;"/>




Answer

Check this snippet in CSS3 @keyframes rule

img{
 position:absolute;
 top:50px;
 right:80%;
 width:100px;
 height:100px;
 border-radius:50%;
 transition-duration:1s;
 animation:animate 3s;
}

@keyframes animate{
  from{
  transform:rotate(0deg);
  } 
  to{
  transform:rotate(-500deg);
  }
  from{
  right:5px;
  } 
  to{
  right:80%;
  }
}
<img src="http://cdn.wallpapersafari.com/15/28/zMTLik.jpg" style="height:100px; width:100px;"/>

Comments