Anyone who wants to learn, practice or even master CSS animation will fall in love with the tips & resources in this post. Modern CSS3 animation techniques are varied among many different ideas. Anyone who’s dedicated and willing to keep at it will surely come out the other side wiser and more confident from the experience. The following tools & resources can be invaluable for anyone diving into the ocean of CSS animation techniques.
CSS3 Animation Tutorials
For those who are unfamiliar with CSS animation its a good idea to start out learning from others. Developers are usually excited to share what they’ve learned from practice or project work. Those who have a place to write will often publish tutorials, articles, or even detailed videos on websites like YouTube or Vimeo.
Each of the following articles covers a specific method of CSS animation. Granted there are dozens of similar results if you take the time to search. But it’s always a good idea to be specific and focus directly on topics that capture your attention.
Basics of CSS Animation
The Tuts+ website has an incredible amount of tutorials and detailed courses which delve into the most popular subjects related to digital design & development. One of their newer articles by Catalin Miron covers a beginner’s intro to CSS animation.
This tutorial explains the specifics of keyframes and how to build your own unique animations from nothing more than HTML elements. It is no doubt a very detailed post, but the content is reliable and proves to be a great learning experience.
To get even more specific take a look at this Smashing Magazine tutorial which delves into CSS timing functions. These properties dictate how keyframe animations run with reference to delays, timing, and easing. It’s recommended that you at least understand the basics of CSS animation before jumping into more complicated subjects like custom timing.
Animating SVG with CSS
Scalable Vector Graphics is the newest craze for website graphics. These can be created from any vector program – the most popular being Adobe Illustrator. With modern web browsers, it’s possible to create an SVG and scale/animate between different frames or positions using CSS.
Jonathan Suh has written an excellent guide to animated SVGs with CSS. This post covers everything from drawing the SVGs and exporting them to writing the actual CSS code. There’s even a brief section on degradation for web browsers that don’t support SVG image rendering.
Finally one of the more complex but fascinating subjects is graphical sprite animation. This technique is made by creating a series of images with frame-by-frame differences. Then using CSS the images will naturally animate to create a motion-activated sprite image.
This CSS sprite animation tutorial was written by David Walsh using a PNG sprite image. The most difficult part is actually creating the sprite sheet with individual frames of the animation. But once you’ve got it nailed down this can be a really cool website effect when used properly.
Open Source Libraries
Each of the following CSS libraries are completely free to download and use on any project, commercial or otherwise. All of them are hosted on GitHub where you can find updates, bug fixes, and a community of developers who also support the codebase.
Perhaps the original and most notorious bad boy of CSS animation is Animate.css created by Daniel Eden. This library is packed with some really cool effects that can be added onto any element in your layout with just a simple CSS class. Check out the GitHub page for documentation and setup directions.
CSS motion doesn’t always have to be fading in or sliding down from some part of the webpage. You can see an alternative in the CSS Shake animation library. This project was built for easily-accessible shaking animations to be applied onto alert messages, modal windows, signup boxes, or anything similar. Although it may not be useful in every project, CSS Shake is well put-together and serves its purpose flawlessly.
The Magic Animations library is another tome of CSS3-animated beauty. The project feels very much like Animate.css but with some more extravagant keyframe effects. You can test out live animation effects on the Magic.css demo page & find setup directions right on GitHub.
The Effeckt.css library focuses on both keyframes and unique transitions. It is currently still in active development and may not be 100% suitable for live websites. However the effects are simply phenomenal ranging from content tabs to form elements.
Link hover states have always been handled in CSS, but hover animation has not always been so easy. Now with the Hover.css library you can apply hover animations onto any page element. The effects range from speech bubble tooltips to jiggling link icons and everything inbetween.
Webapps & Code Generators
Although CSS animation is still a fairly new phenomenon, web developers have been busy crafting handy tools and online code generators for the community. These are all free to use and should help you to create any type of animation from basic transitions to detailed keyframes.
First up is a generic animation generator hosted on the CSS3 Maker website. It will output the code needed for any type of basic CSS3 animation. The effect can be demoed right from the page and you’ll have access to various controls for updating or manipulating the animation.
Custom Keyframes Generator
Ceaser is a free online easing tool for generating CSS3 easing functions. The webapp uses a custom bezier handle where you can manipulate the exact type of easing manually or via pre-generated equations. Once you’ve found the perfect easing effect your code will be output directly onto the page where you can copy/paste it right into your project.
Although this webapp is still in beta it might be the absolute coolest thing in your arsenal. CSS Animate is a fully-featured webapp for generating customized keyframe animation.
Every single property is editable from the right-hand menu where you can test out different values, easings, and timings. You can even dynamically update the keyframe animation name and the CSS class name in the code output window.
Finally we come to the easing cheat sheet webapp. This site behaves like a dedicated playground for accessing the most popular easing functions in CSS. You can test how they work in any browser to see which easing would be right for your project. It’s all completely open source and you can even find the project code hosted on GitHub.
Whether you’re just getting started or have been practicing CSS for years, these resources will prove useful for all kinds of projects. Web development is a detailed process and by using the right tools you can alleviate some of the hard work. Also be sure to bookmark your favorite CSS animation libraries & webapps for future reference.