#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    66
    Rep Power
    3

    Moving an image across the screen


    Hello again. How can I animate a photo (only using css) so that it moves 90 pixels starting from the left and 90 pixels away? I have been looking all over the internet but I can't find anything helpful. Thanks
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    249
    Rep Power
    86
    Hi there Nick Wyden,

    here is an example for you to try...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>animation example</title>
    
    <style>
    body {
        background-color:rgb(0,0,0);
     }
    #leaves {
         display:block;
         border:3px double rgb(0,255,0);
         margin-top:90px;
    
        -moz-animation-delay:1s;
        -moz-animation-duration:5s;
        -moz-animation-name:newPosition;
        -moz-animation-fill-mode:forwards;
    
        -webkit-animation-delay:2s;
        -webkit-animation-duration:5s;
        -webkit-animation-name:newPosition;
        -webkit-animation-fill-mode:forwards;
    
        animation-delay:1s;
        animation-duration:5s;
        animation-name:newPosition;
        animation-fill-mode:forwards;
     }
    @-moz-keyframes newPosition {
      from {
        margin-left: 0;   
      }
      to {
        margin-left: 90px;
      }
     }
    @-webkit-keyframes newPosition {
      from {
        margin-left: 0;   
      }
      to {
        margin-left: 90px;
      }
     }
    @keyframes newPosition {
      from {
        margin-left:0;    
      }
      to {
        margin-left:90px;
      }
     }
    </style>
    
    </head>
    <body>
    
    <div>
     <img id="leaves"  src="http://www.coothead.co.uk/images/leaves.png" alt="leaves">
    </div>
    
    </body>
    </html>
    coothead

IMN logo majestic logo threadwatch logo seochat tools logo