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 {
    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 {
    animation: inner-circle 5s linear infinite;
}