Animating on the web can be easy and fun. This tutorial will show you how to use a tool called Stylie to create beautiful animations with just your mouse.
CSS @keyframe animations are a powerful addition to any web developer’s tool belt. In many cases, they are simpler to implement than JavaScript-based animations, and they allow for more intricate motion than CSS transitions. However, the @keyframe API can be a little lacking for more ambitious animations. Furthermore, it can be difficult to a take an animation in your head and convert it into code, even if the animation is a simple one. To address these challenges, I've developed a tool called Stylie.
Stylie is an open source graphical web application that allows you to easily create CSS @keyframe animations. It helps you to visually construct complex sequences in minutes that would normally take hours to code by hand. Cutting down on the time it takes to bring your idea to life also makes iteration much easier, allowing you to discover interesting new visual effects that coding by hand would not.
Exploiting the @keyframes API
Most CSS @keyframe animations are relatively straightforward and only contain a few steps:
@keyframes my-animation {
0% {
transform: translate(0px, 0px);
}
100% {
transform: translate(300px, 200px);
}
}However, the CSS @keyframe spec actually allows for any number of keyframes in an animation:
@keyframes my-animation {
0% {
transform: translate(0px, 0px);
}
10% {
transform: translate(30px, 15px);
}
20% {
transform: translate(60px, 30px);
}
/* … */
100% {
transform: translate(300px, 150px);
}
}You can take advantage of this fact to build extremely intricate and sophisticated motion paths. With enough keyframes, the path smooths out and the individual steps become unnoticeable. If these points are properly spread out between 0% and 100%, you can even simulate animation easing curves. Typical CSS animations provide a limited set of easing options, but properly spacing out keyframes set to animation-timing-function: linear allow you achieve any curve you desire. This is an extremely powerful technique that allows you create just about any kind of animation that you can dream of. However, trying to achieve this effect by writing @keyframe code for even a simple motion would take hours, so I don't recommend doing this manually.
Using Stylie
Stylie is designed to be as easy to use as possible. When you first load the app, you'll see a ball animating on a loop between two crosshairs.
You can drag these crosshairs around and the animation will update as you interact with it. To add another keyframe, press the + button in the upper right corner of the dark gray control pane, or press the K key on your keyboard. You can add as many keyframes as you'd like.
The Control Pane
If the control pane gets in your way, you can drag it away or press the C key to toggle its visibility. To see the full online manual for Stylie, click the ? icon in the page header or press the H key.
Easing Properties
Once you get your keyframes where you want them, you can add easing curves to individual properties. Select a curve name from the dropdown next to each property, the preview will update automatically (this is a common theme in Stylie).
You can also create custom easing curves. To do this, select customEasing1 for a property, open the Motion tab in the control panel, and drag around the control points in the Bezier curve preview. You can create as many custom easing curves as you want by pressing the + button next to the Custom easings dropdown. New custom easing curves will become available to all properties in the Keyframes tab as soon as you create them.
Adding, removing, and tweaking keyframes and individual properties makes up the bulk of the Stylie workflow. The tool has been optimized for this, as the most effective animations are the result of lots of tweaking and playing with an idea.
Exporting Cross-browser CSS Animation
Once you're happy with your animation, you can export it to CSS3 @keyframe code that you can use in your projects. To do this, click the CSS tab. This tab contains a number of controls to tweak the generated CSS, which you can see in the text box in the bottom half of the pane.
One control you'll want to pay special attention to is the array of checkboxes for each browser vendor. Most browsers don't currently support standard @keyframe code, so you'll need to use the vendor-prefixed versions of the generated CSS. All you need to do is select all of the vendors you wish to support. There is no penalty for supporting more vendors, but be aware that it will increase the size of the generated CSS and therefore the download size of your stylesheets. From this tab, you can also define the DOM element class to target with your animation. Once you've selected your vendors and targeted a DOM element, copy the CSS out of the text box and paste it into your stylesheets.
Being a Stylie Power User
Stylie also gives you quite a few tools to bring your animations to a whole new level, as well as utilities for managing and experimenting with different animation ideas.
Rotation Support
When your cursor is not focused on a text input, you can hold the shift key on your keyboard to enable keyframe rotation editing. Yellow Cubelets will overlay each of the keyframe crosshairs in the preview area which you can click and drag around to rotate the corresponding keyframes along their X and Y axes. Dragging the narrow Cubelet handles rotates along the Z axis.
In addition to manipulating of the rotation of each axis, you can also modify the scale of each keyframe (how big it is) by scrolling your mouse wheel while the cursor is hovered over a Cubelet.
Keyframe Tweaking
If you want finer-grained control over each property of a keyframe, including X/Y, rotation and scale, you can re-enter the values in their respective text fields in the Keyframes tab. In addition to re-typing in the field's value, you can also press the up or down arrow keys while focused on a text field to tweak the property. If you want to stick with the mouse, you can also scroll your mouse wheel up or down while hovering over a property field to increment or decrement it. The preview will update as you change the text field's value. All numeric text fields in Stylie work this way.
In addition to tweaking individual text fields, you can move entire keyframes around within the animation timeline. To do this, click on the ms labels in the Keyframes tab and re-enter their value. The animation will update once you click out of the ms text field or press the enter key. If the keyframes were reordered as a result of the timing change, they will be moved around appropriately within the tab.
Saving Animations
Building a complex animation takes time, and you won't want to lose your work just because you've navigated away from Stylie. Fortunately, you can save and recall as many animations as you need. To do this, click the wrench tab (it's an icon) in the control pane. From here, you can name and save your animation for later use.
In case you accidentally leave or refresh the page while editing an animation, any in-progress work is always saved and reloaded upon your return. If you want to start over from scratch, click the Create new animation button in this tab.
Going Off the Beaten Path With Rekapi
The heart of Stylie is a keyframe animation engine called Rekapi. Rekapi is what powers the preview animation, and it's what generates the CSS that you can paste into your stylesheets. Any animation that you can create with Stylie can be created programmatically with Rekapi, but you can also create even more sophisticated animations that Stylie's UI might not allow for.
In order to keep Stylie's UI simple and easy to use, it cannot facilitate the creation of any conceivable type of animation. However, Rekapi's keyframe animation model affords a powerful means of creating just about any type of motion with a declarative API. If Stylie's UI ever leaves you wanting for even more control, consider using Rekapi to programmatically build the animation that you want.
Note: Importantly, Rekapi allows for animating as many individual components (called Actors) as you need, whereas Stylie currently only allows for one at a time.
The Future of Stylie
Stylie is stable and usable, but the tool is far from complete. In addition to making minor tweaks and improvements to the user experience over time, there are some significant new features planned that will hopefully enable all sorts of interesting animation possibilities. The goal for Stylie is to enable anyone to easily create any animation that they can imagine, as well as remain free to use and open source.
If you would like to contribute to the project by finding and fixing bugs, or by proposing or building in new features, you are encouraged to do so!
Powerful Tools for a Stronger Community
Stylie is built around the idea that powerful tools should be freely available to use by everyone. I'd love to hear what you want to see from the tool so that it can be shaped into what the web development and design community wants and needs. If you have an idea for an improvement, please share it via the Github issue tracker. Keep on building beautiful animations!