Move element in a circle path

HTML

<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
<div><div>☻</div></div>

CSS

@keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

@keyframes inner-circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(-360deg); }
}

body > div:hover {
    width:100px;
    height:100px;
    margin: 20px auto 0;
    color:orange;
    font-size:100px;
    line-height:1;
    animation: circle 5s linear infinite;
    transform-origin:50% 200px;
}

div > div:hover {
    animation: inner-circle 5s linear infinite;
}