Example Buckshot's declarative keyframe animation to CSS3 translation.

buckshot_template_resource

<template xmlns='http://buckshotui.org/platforms/html'>
	<border name='box1' width='50' height='50' background='Blue'>
	  <actions>
	    <!-- declaratively specifying a trigger to play the animation -->
	    <playanimation event='click' animation='anim1' />
	  </actions>
	</border>
	<resourcecollection>
		<animationresource key='anim1'>
		  <keyframes>
				<animationkeyframe time='0'>
					<states>
						<animationstate target='box1' property='translateY' value='0' />
					</states>
				</animationkeyframe>
				<animationkeyframe time='1'>
					<states>
						<animationstate target='box1' property='translateY' value='20' />
					</states>
				</animationkeyframe>
				<animationkeyframe time='2'>
					<states>
						<animationstate target='box1' property='translateX' value='300' />
						<animationstate target='box1' property='background' value='Orange' />
					</states>
				</animationkeyframe>
				<animationkeyframe time='3'>
					<states>
						<animationstate target='box1' property='translateY' value='70' />
					</states>
				</animationkeyframe>
				<animationkeyframe time='4'>
					<states>
						<animationstate target='box1' property='translateX' value='55' />
						<animationstate target='box2' property='translateY' value='70' />
						<animationstate target='box2' property='rotateZ' value='180' />
					</states>
				</animationkeyframe>
			</keyframes>
		</animationresource>
	</resourcecollection>
</template>

css3_output

/* 
 * CSS3 animation compiler emits...
 * (simplified example)
 */

/* 
 * Percentages are relative transformations of each keyframe's point on the timeline.
 * This is the real advantage because in more complex scenarios, the designer can just think in
 * terms of keyframes of each element on a timeline and the CSS animation compiler figures out
 * all the interpolations of each element in CSS.
 *
 * In this example, we are only dealing with one element, but the compiler can handle multiple elements
 * and would write out keyframe and animation declarations for each of them.
 */
@keyframes anim1 {
  0%  {translateY(0px);}
 25%  {translateY(20px);}
 50%  {translateX(20px); background: Orange}
 75%  {translateY(70px);}
 100% {translateY(35px); translateX(55px); rotateZ(180deg); }
}

/* The framework injects this into the CSS stylesheet when a 
 * .playAnimation() is called on the 'anim1' resource, or via a 
 * action declaration in a template as shown above.
 */ 
#box1{
  animation: anim1 4s;
}