How to Create CSS3 Animations with Stylie

By John Paul Mueller

Getting a CSS3 animation just right can be difficult. Each developer has different skills and ways of viewing tasks. Stylie is designed for developers who are more visually oriented. You choose a starting and ending point for the animation, using the X and Y values.

The R value determines the amount of rotation that the animated object performs. You can choose how long the animation occurs using the time values. In addition, the X, Y, and R values can each have an animation effect associated with them.


Many animations move in more than one direction. Click the plus sign (+) to add another direction. This direction also has X, Y, and R values and you can set its duration and special effects as well. In short, you can use this interface to create incredibly complex animation effects that go in more than one direction.

The Motion tab defines characteristics of the animation, such as how many times you want the animation to execute (you can choose to make the execution an infinite loop) and how the object you’re animating should interact with the animation path.

This is also the tab you use to define the easing used to make the animated effect flow smoothly. A straight line animation is simple, but the easing becomes important when you start working with animations that move in more than one direction.

After you finish configuring your animation, you click the CSS tab, which contains the CSS you use to create the animated effect in your application. The CSS tab lets you choose a name for the animation class. You can also select which vendors to include as part of the CSS and the animation quality level.

The HTML tab contains sample tags you need to complete the animation. This is where you’d need to make modifications to include the object you want to animate in place of the simple circle supplied by Stylie.