More control to animate objects with CSS animation properties and keyframes. Declared animations.
Example
Example of an animation using the @-webkit-keyframes at-rule with -webkit-animation properties.
...
/* 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;} }