Move image across screen with CSS3

Question

I've been browsing the web for quite awhile trying to find a way of making icons move onto the screen (from the left and onto the center of the body div) when you load the page. How can this be done?

This is what I have so far:

CSS3

a#rotator {
    text-decoration: none;
    padding-right: 20px;
    margin-left: 20px;
    float: left;
}

a#rotator img {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    border-radius:60px;
    transition-duration: 1s;
    }

a#rotator img:hover { 
    box-shadow: 0 3px 15px #000;
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg); 
    transform: translate()
}

Answer 1

If you want a pure CSS solution, you can use the CSS3 animation feature. You create or declare a animation with the keyword @animation followed by the name you want to give to that animation. Inside the curly brackets you must indicate the keyframes of the animation and what CSS properties will be applied in that keyframe, so the transition between keyframes is done. You must specify at least two keyframes, the beginning and the end of the animation with the keywords from and to, followed by the properties inside curly brackets. For example:

@keyframes myanimation
{
    from {
        left: 0;
    }
    to {
        left: 50%;
    }
}

Or a example with three keyframes (the percent indicates the percent of the duration):

@keyframes myanimation
{
    0% {
        left: 0;
    }
    10% {
        left: 50%;
    }
    100% {
        left: 10%;
    }
}

Once you have created the animation, you must specify which element you want to animate, it's just the animation property inside the CSS rule that matches the element. Note that the name in the value must match the one that you've created before, and you the duration of the animation. For example:

a#rotator {
    animation: myanimation 5s;
}

Here you can specify the duration, number of times that it must be repeated, etc. You can read the full specs here: http://www.w3.org/TR/css3-animations/

Here you can see a working example with the code you've provided: http://jsfiddle.net/mcSL7/1/

I've stopped floating the element and I've assigned it the position absolute, so I can move it in the body with the top and left properties.

This CSS feature is supported by almost every modern browser, even if some of them need the -webkit- vendor prefix. Check it here: http://caniuse.com/#feat=css-animation

Answer 2

Use jQuery

html

<div id="b">&nbsp;</div>

css

div#b {
    position: fixed;
    top:40px;
    left:0;
    width: 40px;
    height: 40px;
    background: url(http://www.wiredforwords.com/IMAGES/FlyingBee.gif) 0 0 no-repeat;
}

script

var b = function($b,speed){


    $b.animate({
        "left": "50%"
    }, speed);
};

$(function(){
    b($("#b"), 5000);
});

see jsfiddle http://jsfiddle.net/vishnurajv/Q4Jsh/