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:
- Animating in the Browser Setting the scene for the course and looking at the benefits and principles of animation.
- Transitions – From A to B Learn to add smooth transitions as styles change between two states.
- Keyframe Animations Learn how to craft more complex motion with the `@keyframes` and `animation` properties; first the theory and then practical examples.
- Easing and Timing Functions Discover how to add character and control the timing of your animations with easing and cubic bezier functions.
- Putting it all Together Taking things to the next level, we’ll combine effects to create multiple transitions and multiple animations.
- Browser Considerations We’ll discuss browser support, vendor prefixes and performance considerations to make sure your animations work on as many devices as possible.
- Accessibility and Animations Finally, we’ll tackle accessibility concerns and ensure our animations don’t cause issues by being distracting or cause motion sickness.
Frequently Asked Questions about CSS Animations
How can I make my CSS animations smoother and more fluid?
To make your CSS animations smoother and more fluid, you can use the ‘animation-timing-function’ property. This property specifies the speed curve of the animation, allowing you to control the pace of the animation at different points. For instance, ‘ease-in’ starts the animation slowly, and ‘ease-out’ ends the animation slowly. You can also use ‘cubic-bezier’ to create your own speed curve.
Can I use CSS animations on all web browsers?
CSS animations are supported in all modern web browsers, including Chrome, Firefox, Safari, and Edge. However, for older versions of Internet Explorer (IE9 and below), CSS animations are not supported. To ensure compatibility, you can use JavaScript-based fallbacks or simply design your site to degrade gracefully on older browsers.
How can I animate multiple properties at once?
You can animate multiple properties at once by specifying each property and its corresponding values in the ‘animation’ shorthand property. For example, ‘animation: 3s ease-in 1s 2 reverse both running slidein;’. This will animate the ‘slidein’ keyframes over 3 seconds, with a 1-second delay, running twice in reverse, and filling in the animation both forwards and backwards.
How can I pause and resume a CSS animation?
You can pause and resume a CSS animation using the ‘animation-play-state’ property. Setting this property to ‘paused’ will pause the animation, and setting it to ‘running’ will resume the animation. You can control this property using JavaScript to create interactive animations.
Can I use CSS animations to create 3D effects?
Yes, you can use CSS animations to create 3D effects. This is done using the ‘transform’ property with the ‘rotateX’, ‘rotateY’, and ‘rotateZ’ functions. You can also use the ‘perspective’ property to control the depth of the 3D effect.
How can I control the iteration count of a CSS animation?
You can control the iteration count of a CSS animation using the ‘animation-iteration-count’ property. You can specify a number for the number of times the animation should repeat, or use ‘infinite’ for an endless animation.
How can I create a CSS animation that changes color?
You can create a CSS animation that changes color using keyframes. In the keyframes, you specify the ‘background-color’ or ‘color’ property with different values at different percentages. The browser will then interpolate the color changes over the duration of the animation.
Can I use CSS animations with SVG?
Yes, you can use CSS animations with SVG. However, not all CSS properties can be animated with SVG. The most commonly animated SVG properties are ‘fill’, ‘stroke’, ‘opacity’, and ‘transform’.
How can I create a CSS animation that moves in a path?
To create a CSS animation that moves in a path, you can use the ‘offset-path’ property along with keyframes. The ‘offset-path’ property specifies the path for the animation, and the keyframes control the movement along the path.
Can I use CSS animations with media queries?
Yes, you can use CSS animations with media queries. This allows you to create responsive animations that adapt to different screen sizes. You can specify different keyframes or animation properties within different media queries.
Guy RoutledgeFront-end dev and teacher at The General Assembly London. A to Z CSS Screencaster, Founder of sapling.digital and Co-founder of The Food Rush.
Donovan HutchinsonDonovan Hutchinson has been designing and building on the web since the late 90s. During that time he saw the introduction of CSS, and watched it evolve and become better supported over time. As a webmaster and later product designer/developer, Donovan has helped many startups get their products in front of users, written and taught articles and courses, and continues to experiment with web technologies.
