CSS animation?

[cluelessPHP]

Basically I'm looking for some kind of CSS animation, I'm trying to rotate two images 180, the idea is to have one at the top one at the bottom then rotate them 180 so that the bottom one was at the top in an infiante loop with a small delay inbetween

http://gotsocial.co.uk/coffee/

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

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


.main{
	margin-left:auto;
	margin-right:auto;
}
.main {

line-height:1;
animation: circle 5s linear infinite;
transform-origin:50% 400px;
}

.main > figure {
    animation: inner-circle 5s linear infinite;
}

Does anyone know a tutorial on this?

[Derokorian]

I don't remember the tutorial I used, but you can check out the css running my solar system: solar.derokorian.com/orbits.css maybe that will help?

[cluelessPHP]

Oh I remember seeing that awhile ago, looks really nice when it's complete, thanks 🙂