Bringing Websites to Life with CSS Animations

Animation is fast becoming an essential design tool that’s increasingly used to help our users understand and interact with our work.

Recent years have seen great improvements in browser and mobile support for animations. In fact, all modern desktop browsers come with built-in support for CSS animations. Together with other great tools that CSS provides, there’s never been a better time to add movement to our designs. But why is animation so important? And how can you start using it today?

Why CSS Animation is Important in our Designs?

Motion is a huge part of how we communicate and how we understand the world around us. It’s an instinct we’re born with.

We’ve evolved to be really good at noticing movement. Movement protects us by helping us notice changes in our environment and it adds an extra layer of communication to the words we say. Observing movement and visual cues enable us to understand complex actions and ideas in a nonverbal way.

Animation on the web can be leveraged to the same effect and can add extra depth and meaning to the conversation between our users and the User Interface.

For example, we can animate elements off the screen when removing them, and animate them back in when adding new ones. This simple transaction helps us understand where they went. It adds to our mental model of what we’re working with, and makes the interaction richer and more meaningful.

We can use animation to draw attention to certain elements of an interface or to tell stories and lead users on a journey from one step to the next.

Adding animations and transitions to micro interactions within a website or application can help engage users and surprise and delight them. They are also a powerful way of giving users feedback on the actions they are taking such as hovering over clicks, clicking on buttons or filling in forms. This all adds to the conversation and helps add personality to an interface.

What About JavaScript?

CSS isn’t the only way to bring animation to our designs but it is the simplest to get started with. Since the early days of jQuery, we’ve had ways of animating and moving page elements using JavaScript.

More recently, powerful packages such as GreenSock’s GSAP have brought advanced animation to browsers—even for those that don’t support CSS animations. They bring fine-grained control over the way animations work, great backward compatibility and all sorts of helpful functions.

But this does come at a cost. Adding extra JavaScript dependencies to our project makes our projects heavier, resulting in longer download times and time spent processing the page. This might not matter on a fast broadband-connected desktop, but for much of the world relying on slower connections and mobile devices, we need to keep performance in mind.

There’s also the added complexity of bringing in JavaScript frameworks, as it adds more maintenance and possible sources of errors.

Still, JavaScript-based animation options have come a long way and are a powerful and useful option for when we want to add advanced or complex animation.

Before we reach for the plugins, though, there’s a lot we can do with CSS: it’s the quickest and simplest way to get started with animation today.

Animating with CSS

Web browsers support CSS out of the box (to varying degrees).

Just like we would use `font-size` or `background` properties in our stylesheets to craft our visual design, we can also use `transition`, `animation`, and `keyframes` to create movement.

Transitions can be used to smooth the changing styles during a hover state; keyframe animations can be set up to cycle through multiple states and can even be combined together to create complex effects. We can control animation timing, direction and more just using the built-in CSS properties which, after a brief learning curve, will look very familiar to anyone with even basic CSS skills.

Knowing what can be done with CSS is helpful when it comes to making the choice between using `keyframes` or reaching for JavaScript.

Why Not Start Today?

The great thing about CSS animations is that there’s nothing stopping you from starting right away. All you need is a web browser and a text editor, or you can begin creating immediately using a service like CodePen.

There are many reasons you should get excited about animating in the browser. There are many great examples of how animations have boosted not only the aesthetics of a site but have also increased interaction and reduced confusion. But not only is animation a practical tool, working with them is fun and creative; it brings the web to life.

I’ve recently teamed up with SitePoint to create a new course, Animating with CSS. I’m excited about it, in fact, I think it’s vitally important to teach people about how to do new things on the web and make it a better place. This is an extension of my work on CSSAnimation.rocks, another great learning resource for all things CSS animation.

Let’s have a look at what you’ll learn in the course:

1. Animating in the Browser
   Setting the scene for the course and looking at the benefits and principles of animation.
2. Transitions – From A to B
   Learn to add smooth transitions as styles change between two states.
3. Keyframe Animations
   Learn how to craft more complex motion with the `@keyframes` and `animation` properties; first the theory and then practical examples.
4. Easing and Timing Functions
   Discover how to add character and control the timing of your animations with easing and cubic bezier functions.
5. Putting it all Together
   Taking things to the next level, we’ll combine effects to create multiple transitions and multiple animations.
6. Browser Considerations
   We’ll discuss browser support, vendor prefixes and performance considerations to make sure your animations work on as many devices as possible.
7. Accessibility and Animations
   Finally, we’ll tackle accessibility concerns and ensure our animations don’t cause issues by being distracting or cause motion sickness.

Further to the theory and practical examples covered in the course, there are many places to look for inspiration. I’m a fan of checking out the animated concepts on Dribbble. There’s a load of UI inspiration on Use Your Interface, and also Capptivate for iOS inspiration, or if you’re looking for cinematic inspiration, be sure to bookmark Art of the Title.

There’s so much that animation can bring to our designs. It can help us communicate, it can help us tell stories, and it can be a fun, creative outlet. It’s easy to get started, but the sky’s the limit in what we can create. So why not get started, try something new and see how motion can bring your designs to life!