Trends

CSS Web Animation Tools, Techniques and Resources

This collection of tools & learning resources are invaluable to anyone diving into the deep ocean of CSS animation for the first time.

Share on FacebookTweet about this on TwitterPin on PinterestShare on RedditShare on LinkedIn

Web design is an expansive subject with tons of little nooks and crannies to investigate. One such nook (or cranny) is CSS website animation. Traditionally this used to be done using JavaScript, but recent advancements allow CSS developers to create fully-functioning animated effects in modern web browsers.

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

Envato Tuts+ 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.

beginner 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.

Timing Functions

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.

css timing functions

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.

animate svg illustrator howto

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.

OnScroll Animation

I’m sure most designers are familiar with the on-scroll animated effect. Basically icons, graphics, or content sections will animate into view as the user scrolls down to that part of the layout. This effect can be controlled solely through JavaScript, but it’s also possible to perform the animations using CSS3.

onscroll page animation

Petr Tichy wrote this handy tutorial covering the scroll animation effect with CSS. Each element is binded using JavaScript and will be given a class once it comes into view. That class is defined in CSS to have a set of animated effects that only activate once the element is visible. It seems a little tricky but once you get the hang of CSS animation this on-scroll technique can be a really fun effect to recreate.

Sprite Animation

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.

firefox animation sprites

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

Free code libraries are the essence of the modern open source movement. Although this landscape is mostly dominated by logic-based languages like JavaScript or Ruby, there is still plenty of room for CSS libraries. Among these libraries are grid systems, UI kits, and most definitely custom CSS animations.

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.

Animate.css

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.

animatecss library

CSS Shake

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.

css shake library

Magic Animations

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.

magic animations css

Effeckt.css

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.

effeckt css

Hover.css

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.

hover css library

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.

Animation Generator

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.

css3 animation generator

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.

ceaser animation webapp

CSS Animate(beta)

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.

css animate keyframes app

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.

Easing Functions

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.

custom easings function webapp

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.


About the Author Jake Rocheleau

Jake is a passionate web designer and social media entrepreneur, and is frequently researching the latest trends in digital design and new-age Internet ideas. Jake tweets at @jakerocheleau.