Ultimate Guide to CSS3 & HTML5 Animation

Frontend development has moved towards a purely semantic web where visuals can be constructed solely in HTML/CSS. It used to be that animation required JavaScript. But in recent years, a migration has occurred with more developers leaning towards CSS and canvas animation.

There’s lots of great stuff you can do with website animations if you have an eye for design. But how do you create these animations from scratch?

In this post, I’ll showcase a handful of libraries and tools for building custom animation effects predominantly with HTML5 and CSS3 code. Some of these technologies are still in their infancy, but over time I expect HTML5 animation to dominate major portions of the web.

The Basics of Web Animation

Most websites started with animated GIFs and eventually moved onto JavaScript in the late 90s/early 2000s. This move to JavaScript is still popular in today’s web, although tides are changing.

The invention of jQuery pushed for jQuery animations which are still extremely popular today. jQuery offers many things that CSS3 simply cannot do, and for these types of animations, JavaScript will always be the best choice.

But since the invention of HTML5 and CSS3, it’s possible to create transitions and animations with CSS properties. There are now hundreds of free pure CSS animations that can be copied & modified for modern web projects—no JS required.

So where should a new developer get started? And how should HTML5/CSS3 animations be applied to modern web development?

Let’s delve into the different aspects of custom animations and check out some free code snippets along the way.

Transition vs. Animation Properties

There are two primary modes of creating CSS animation: with the transition property and the animation property. Both have widespread browser support but they behave in different ways.

Transitions require much less code but are also a lot simpler. Animations provide incredible amounts of customization and functionality, but you have to raw code animation keyframes from scratch.

Transitions define something in two states: a beginning state and an ending state. There’s little control between these two states other than the time of the transition and the easing quality.

Animations are much more powerful and technical than transitions. They allow for custom delays, multiple states, and progressive changes over time. Transitions move from A to B, then sometimes back to A. But animations can move from A to Z or any other combination of letters in between.

Kirupa has a really great video and a supplementary article explaining the basics between these two properties.

Transitions generally work best with page elements that have single instances of animations. Think about link hovers, button clicks, or dropdown menus. These only have a single type of movement on the page, and once these elements animate they usually go back to their original state(after the click or moving off hover).

So which should you use? It always depends on context, but keep in mind that animations are much more complex so they should only be used when needed for complex situations that can’t be handled with a transition(A to B).

Note that it is possible to use animation effects for simple triggers like clicks or hovers. But the only reason to do so would be if you need heavily customized animation effects like a button jiggling around the page.

Check out these related articles to learn a bit more about custom CSS animations and transitions, along with differences between CSS and JavaScript animation.

HTML5 Canvas Animation

Most HTML5 animation is handled on a Canvas element and ties directly into CSS or JavaScript. It’s mostly popular for web games but can be used for dynamic websites too.

You can build lots of cool stuff like canvas loaders and other similar resources. But most HTML5 canvas animations are purely aesthetic and don’t relate to interactive elements.

This is because canvas elements themselves embed into the page. So unless the entire page is built in a canvas(NOT recommended) then you’ll be limited to whatever elements are in your canvas.

Since HTML5 games are built with the canvas API it makes sense in these scenarios.

You can do some really cool stuff like custom sprite animation and background motion for repeating tiles. I’ve never spent much time building HTML5 games, but there are many great tutorials online covering this exact subject.

If you’re willing to mix HTML5 canvas elements with JavaScript you can build some incredible dynamic effects. These require an understanding of JS functionality and possibly ES6 syntax.

There’s also free tools like Animatron to help designers & developers create custom HTML5 animations.

Animatron offers a free account but limits the total number of projects for each account. As your skills improve you might prefer to create animations from scratch. But a code-generating motions editor is always valuable if you need to save time.

To learn more about canvas animations check out these related articles. And just remember if you want to master HTML5 animation then practice is the key to success.

Free Animation Libraries

The popularity of frontend animation has led to a wide variety of animation libraries There are so many options available that it may be tough deciding where to start.

I’ve curated the most popular choices below that you can choose from. Simply download a copy and try it out in a sample project. Advancements in animation have come a long way and you may be surprised at how much is possible with a free code library.

Animate.css

Undeniably the most popular CSS animation library is Animate.css created by Daniel Eden. It’s still actively updated with quality code and a lively set of pre-built animations.

The landing page lets you test different animation styles to see how they work on-page elements. With a basic CSS class you can represent very detailed animations from zooms, pans, fades, and even a mixture of these effects.

If you can get by with CSS as your animation language then I highly recommend Animate.css. Grab a free copy from GitHub and test it for yourself.

CSShake

A similar animation library is CSShake, albeit with limited motion choices. The library pertains directly to CSS animations that shake and force certain elements to vibrate on the page.

It’s easy to keep these animations going all the time. But they can be rather annoying after a lengthy period. I recommend using this scarcely or only as a reminder for an on-page message box or signup form.

Hover.css

Hover.css is a very simple open-source CSS animation library made for hover actions. Whenever the user hovers over a button it can be targeted for a certain type of motion effect. This is applied directly with Hover.css and includes rotations, skews, and even background transitions.

Most of the Hover.css effects apply directly to page buttons rather than links. Although this can be used on any hoverable element, it’s best used for page elements that require some attention.

Motion UI

Zurb recently published the Foundation 6 release which included a custom animation library called Motion UI. The landing page is more like a playground to see what can be done and how the effects work.

It’s a really nice intermediate library where the effects can be pragmatic, aesthetic, or both. You can fade elements into view or have them wiggle on hover. There’s a handful of animation types to choose from and it makes animating an interface easier than ever.

To learn more about this newer library check out the Motion UI documentation and download a copy from the Zurb GitHub repo.

Magic.css

For a more obscure library check out Magic.css on GitHub. It has a sample landing page where you can demo the animations and see how they affect page elements.

It’s mostly a library for animating elements into and out of view. But it has its place in a great landing page with custom animations and sequence-animated elements.

Mo.js

In the realm of JavaScript libraries you might find Mo.js to be equally valuable as CSS counterparts. It relies on JavaScript animation but works more like a motion graphics library.

It supports retina displays and has a modular design where you can append custom animations into the Mo.js library. It really is the most advanced JS library for animation I’ve ever found.

Granted not everyone is looking for this much detail in their animations. But if you are then check out Mo.js on GitHub and try it out.

AniJS

Here’s another cool all-around library called Ani.js which works as a custom animation/component library. Animations can be tied to page widgets like tabs, accordion menus, and scroll-to-reveal windows.

This is very detailed and although it’s easy to setup, it takes a lot of practice to fully understand. If you’re looking for a great animation library that goes beyond jQuery then AniJS might be right for you.

And if you’re looking for more libs check out this list on JavaScripting.com. It covers all the major animation libraries that are free and open source for web development.

Best Free Code Snippets

If you’re looking for freebies like code snippets then I’ve got ya covered. After scouring CodePen I was able to organize this small gallery of free open source pens from web developers.

Embedding all 20+ examples would make this page load very slow, so instead, I just have a placeholder screenshot that links to the pen. If you see anything you like just click over to the pen and check it out! All code is open source so you can copy and edit as you see fit.