<div class="palm-scene palm-dark">
<div id="complete_example"></div>

<div id="e_example">
	<div class="palm-text-wrapper">
		<div class="palm-body-text" x-mojo-loc=''>
			More control to animate objects with CSS animation properties and keyframes. <em>Declared animations</em>.
		</div>
		
		<div class="palm-body-title" x-mojo-loc=''>
			Example
		</div>
		
		<div class="palm-body-text" x-mojo-loc=''>
			Example of an animation using the @-webkit-keyframes at-rule with <em>-webkit-animation</em> properties.
		</div>
		
		<div id="sky">	
			<div class="star anim-blink" style="top:30px; left:30px;"></div>
			<div class="star md r2" style="top:30px; left:200px;"></div>
			<div class="star sm" style="top:10px; left:10px"></div>
			<div class="star sm r1" style="top:70px; left:200px;"></div>
			<div class="star sm r2" style="top:40px; right:100px;"></div>
			<div class="star sm" style="top:140px; right:150px;"></div>
			<div class="star sm r1 anim-shoot" style="right:0;"></div>
		</div>
	
			
	</div>
</div>

<div id="e_about">
</div>

<div id="e_html">
<div id="sky">	
	<div class="star anim-blink" style="top:30px; left:10px;"></div>
	<div class="star md r2" style="top:30px; left:100px;"></div>
	...
	<div class="star sm r1 anim-shoot" style="top:-100px;left:400px;"></div>
</div>	
</div>
	
</div>

<div id="e_css">
/* place stars */
#sky {
	position: relative;
}
.star {
	position: absolute;
	width: 73px;
	height: 73px;
	background: url(../images/star.png) no-repeat 0 0;
}
.sm {
	zoom: .5;
}
.md {
	zoom: .75;
}
.r1 {	
	-webkit-transform: rotate(15deg);
}
.r2 {	
	-webkit-transform: rotate(45deg);
}

/* animations */
.anim-shoot {
	opacity: 0;
	-webkit-animation-name: shootingStar;
	-webkit-animation-duration: 1.5s;
}
@-webkit-keyframes shootingStar {
	0% {opacity: 0; -webkit-transform: translateX(0) translateY(0);-webkit-animation-timing-function: ease-in-out;}
	30% {opacity: 1; -webkit-transform: translateX(0) translateY(0);-webkit-animation-timing-function: ease-in;}
	100% {opacity: 0; -webkit-transform: translateX(-400px) translateY(200px);}
}
.anim-blink {
	-webkit-animation: blinkingStar .5s ease 1s 2; /* shorthand  - name, duration, timing, delay, iteration */
}
@-webkit-keyframes blinkingStar {
	0% {-webkit-transform: rotate(0deg); opacity: 1;}
	50% {-webkit-transform: rotate(5deg); opacity: 0.5;}
	100% {-webkit-transform: rotate(0deg); opacity: 1;}
}
</div>
</div>