CSS3 Animation - centering an image

by karim79

HTML

<div id="viewport">
    <img id="myImg" src="http://static.php.net/www.php.net/images/php.gif"/>
</div>

CSS

#viewport {
    position: relative;
    max-width: 600px;
    max-height: 600px;   
    width: 100%;
    height: 500px;
    background-color: slategray;   
}

#myImg {
    position: absolute;
}

img{
     -webkit-animation: centerMyImage 5s infinite;
     -moz-animation:    centerMyImage 5s infinite;
     -ms-animation:     centerMyImage 5s infinite;
     -o-animation:      centerMyImage 5s infinite;
}

@-webkit-keyframes centerMyImage {
    0%   { margin-left: 0px; }
    100% { margin-left: 100px; }
    
}

@-moz-keyframes centerMyImage {
    
    0%   { margin-left: 0px; }
    100% { margin-left: 100px; }
}

@-ms-keyframes centerMyImage {
    0%   { margin-left: 0px; }
    100% { margin-left: 100px; }    
}