CSS3 Animation Wizard

Seconds
Duration
-moz-	➕
-webkit-	➕
-o-	➕

{{ seconds / duration * 100| number:0}}% {-moz--webkit--o-transform: translateX({{ rangex }}px) translateY({{ rangey }}px) RotateY({{ rotatey }}deg) RotateZ({{ rotate }}deg) scaleY({{ Scaley *0.1| number:1 }}) scaleX({{ Scalex *0.1| number:2 }}); opacity:{{ opacity *.1 | number:2}};} /* {{ seconds }}s */

X		{{ rangex }}
Y		{{ rangey }}
RotateZ		{{ rotate }}
RotateY		{{ rotatey }}
Scalex		{{ Scalex }}
ScaleY		{{ Scaley }}
Opacity		{{ opacity }}%

Option Description

id A unique reference for the animation
delay Specifies a delay before the animation begins. Corresponds to the animation-delay CSS property

duration Specifies the amount of time it should take for one cycle. Corresponds to the animation-duration CSS property

iterations Specifies how many times to run a cycle of the animation. Corresponds to the animation-iteration-count CSS property

direction Specifies in which direction to run through the animation timeline. Corresponds to the animation-direction CSS property

easing Specifies how the animation transitions between steps. Corresponds to the animation-timing-function CSS property

fill Specifies the values applied to the element and the start and end of the animation. Corresponds to the animation-fill-mode CSS property

endDelay Specifies an amount of time to delay after the end of the animation
iterationStart Specifies the point n the iteration the animation should start