How to make CSS animation happen the moment the website loads

Alright, so what I have is an image I want to move and stay in its final position once its there. I currently have programming that makes the image do an animation when its hovered over. HTML:

<html>
<head>
    <link href="stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div id="wrapper">
        <div class="move"></div>
    </div>
</body>

CSS:

#wrapper {
width: 1000px;
margin: 0 auto;
}

.move {
width: 150px;
height: 150px;
background-color: red;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
}

.move:hover {
top: 20;
left: 20;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
}

Anyway, I would like to know a way to have the transition happen the moment the website loads, then stay in the position as defined in move:hover

Solution

Example of code which could answer your question:

Animation start when page is loaded.
Animation stop when User move mouse hove element with class .move

Please test it here:

http://jsbin.com/cejuxoyaco/1/

Works on Chrome, Safari, Opera.

Explanation: Use @keyframes to define your animation. Use animation-play-state: paused; to stop animations when move:hover.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
<style>
#wrapper {
width: 1000px;
margin: 0 auto;
}

@keyframes anim {
    from {background: red;}
    to {background: yellow;}
}

.move {
    width: 150px;
    height: 150px;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: myfirst 5s;
    animation: myfirst 5s;
}

@-webkit-keyframes myfirst {
    from {width: 50px;}
    to {width: 150px;}
}

@keyframes myfirst {
    from {width: 50px;}
    to {width: 150px;;}
}

.move:hover {
top: 20;
left: 20;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
</style>


</head>
<body>

   <div id="wrapper">wrapper
        <div class="move">move</div>
    </div>
</body>
</html>