Intel XDK CSS Animation Sample

The source code for this sample can be found here: or download the Intel(R) XDK to check out all the HTML5 Samples.


This demonstration application uses CSS3 animation to display a whimsical character in a variety of expressions.

Source Code

The CSS3 animation sample has several HTML5 elements created for the features of the character to be animated, as well as the six buttons to trigger the different expressions.

The buttons trigger functions that alter the CSS classes that manage the properties of the HTML5 elements of the character. There are six different sets of CSS classes, essentially one for each emotion the character shows. Find these CSS classes in the css/main.css file.

The code that actually alters the CSS classes is found in the js/main.js file.


This sample application has been tested on a variety of iOS and Android devices.
For more complete information about compiler optimizations, see our Optimization Notice.