CSS3 Revolution animation

Tryed to make an element revolve around another. Here the content element revolve arout tne middle of the container.

by gudoy

HTML

<div id="container">
    <span id="content"></span>
</div>

CSS

@-webkit-keyframes rotateCtnr
{
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}

@-webkit-keyframes rotateCtnt
{
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(-360deg); }
}

#container { width:200px; height:200px; margin:100px; background:red; position:relative; 
    -webkit-animation:rotateCtnr 10s ease 0 1 normal;
}
#content { width:50px; height:50px; position:absolute; left:0; top:O; background:green;
    -webkit-animation:rotateCtnt 10s ease 0 1 normal;
}