CSS3 Transition - Constant Effect?

[CSSQuest]

I'm working on a website geared at children and wanted to add subtle movement to one or two of the elements on the page.

I planned to use the transition property and a super subtle rotation/margin change to the element to give it the soft effect that its swinging in a breeze.

The problem I've run into is that I only know how to apply transition effects to elements that are interacted with - :hover :focus etc.

Is there a way to get this effect going constantly whether someone mouses over it or not?

Thanks in advance!

[CSSQuest]

Bump.

[teedoff]

Never used the transition property, but you should know first that IE doesn't yet support it.

But since its the hover that triggers the effect, not sure this can be done without some js possibly? again not sure as I have never used it.

[CSSQuest]

I use CSS3 to add to the user experience - not as a foundation for how the website works - in this case meaning the CSS3 adds the nice subtle movement effect - but the site works fine without the movement in IE.

I ended up finding out how to do it - turns out I need to use "animations and transforms" instead of transitions.

Here's the code I used.

/* Swing Animation Set Up for Navigation - Safari and Chrome */
@-webkit-keyframes swing {
	0% { margin-top: 0px; margin-left: 0px; -webkit-transform: rotate(0deg); }
	25% { margin-top: -2px; margin-left: 3px; -webkit-transform: rotate(-3deg); }
	50% { margin-top: 0px; margin-left: 0px; -webkit-transform: rotate(0deg); }
	75% { margin-top: -2px; margin-left: -3px; -webkit-transform: rotate(3deg); }
	100% { margin-top: 0px; margin-left: 0px; -webkit-transform: rotate(0deg); }
}

/* Swing Animation Set Up for Navigation - Firefox */
@-moz-keyframes swing {
	0% { margin-top: 0px; margin-left: 0px; -moz-transform: rotate(0deg); }
	25% { margin-top: -2px; margin-left: 3px; -moz-transform: rotate(-3deg); }
	50% { margin-top: 0px; margin-left: 0px; -moz-transform: rotate(0deg); }
	75% { margin-top: -2px; margin-left: -3px; -moz-transform: rotate(3deg); }
	100% { margin-top: 0px; margin-left: 0px; -moz-transform: rotate(0deg); }
}

/* Apply the Swing Animation */
body div > header h1 a {
	-webkit-animation: swing 5s infinite linear;
	-moz-animation: swing 5s infinite linear;}
body div > header nav a.whatsitlike {
	-webkit-animation: swing 5s infinite linear;
	-moz-animation: swing 5s infinite linear; }
body div > header nav a.whoscoming {
	-webkit-animation: swing 5s infinite linear;
	-webkit-animation-delay: 1s;
	-moz-animation: swing 5s infinite linear;
	-moz-animation-delay: 1s; }
body div > header nav a.wantmore {
	-webkit-animation: swing 5s infinite linear;
	-webkit-animation-delay: 2s;
	-moz-animation: swing 5s infinite linear;
	-moz-animation-delay: 2s; }