Joan León This is the first in a series of articles to look at technologies, tools, examples and performance in web animation.
- Web Animation
- CSS Transitions
- CSS Animations
- SVG Animations (Coming soon)
- JavaScript Animations (Coming soon)
- Canvas Animations (Coming soon)
We all know that animations, whether in a logo, as transitions between states, informative or animation in microinteractions, add value to the product and experience.
We have several techniques or development paths when implementing animations on the web, so let’s learn about them.
Options for making animations on the Web
The first thing we need to consider is the type of element we’re going to animate. We can animate a DOM element, an SVG or part of it, an attribute of a DOM element (like color) or finally graphic elements represented in a <canvas> element.
1.CSS
Animation with CSS can be considered the foundation of web animation. Both for DOM elements and for SVG.
Transitions
The basic animation in CSS is a transition between 2 states:
In the following example we can see a state change in the image size when hovering over it.
As you can see, the state change is instant, a bit abrupt.
In CSS we have the transition property available and if we use it, we can see that the effect changes completely:
What’s happening now?
By adding the transition property we can see that we now have an animation. This is because the browser is interpolating (calculating intermediate steps) between the two states, in this case a change in image size and a shadow.
Transitions
In the example I used the transition property as shorthand, but let’s look in detail at the properties we have available.
| Property | Function |
|---|---|
| transition-property | CSS property to which we want to apply the transition |
| transition-duration | Time elapsed between states |
| transition-timing-function | Function that defines how the transition is calculated |
| transition-delay | Time elapsed until the transition starts |
| transition | Works as shorthand to define the previous properties in a single line |
@keyframes
Transitions are very useful for controlling animation between two states, but if we want to animate more than 2 states, we have to use @keyframes:
In the example we can see that there’s an animation: scale 2s infinite ease; property in the .logo class and then a @keyframes function where we define 3 states for the animation. We’re doing it with percentages 0%, 50% and 100%, they refer to the timeline we’ve defined as 2 seconds in the animate property.
Like transition, I used the animate property as shorthand, the properties we can use to define an animation are:
| Property | Function |
|---|---|
| animation-name | Name of the animation, which we’ve defined in @keyframes |
| animation-duration | Animation duration |
| animation-timing-function | Specifies how a CSS animation should progress through each cycle’s duration |
| animation-delay | Time elapsed until the animation starts |
| animation-iteration-count | Number of animation repetitions |
| animation-direction | Indicates whether the animation should rewind to the starting frame when finishing the sequence |
| animation-fill-mode | Specifies the mode in which a CSS animation applies its styles, establishing its persistence and final state after execution |
| animation-play-state | Determines whether an animation is running or paused |
Don’t worry if you don’t understand something, in future articles we’ll go into detail about how the
animationproperty and@keyframework.
2.SVG
SVG graphics (in HTML) end up being represented in the browser as elements that are part of the DOM, so we can also animate them with CSS.
In this example we animate the color of two of the logo elements with CSS.
SVG has its own specification for animating elements, but it’s obsolete, so I’m not going to comment on it. But I’ll leave you this link “SVG animation with SMIL” in case you’re curious (I was and looked at how it works 🤪*)*.
3.JavaScript
For web animation with JavaScript, natively, we have the Web Animation API (WAAPI) at our disposal.
In the example with WAAPI we achieve the same effect as the previous version, but this time the animation is defined in JavaScript, with all the programmatic potential that entails.
This looks very promising, but the bad news is current browser support.
As we can see on Can I Use we’re far from being able to implement natively. We can use a polyfill, but we’ll see that in an article dedicated to Web Animation API.
That’s why JavaScript libraries are based on their own animation and transformation API with CSS. We’ll see it in detail when we look at JS libraries.
4.Canvas
The canvas element has an API for drawing graphics. Actually animations in canvas are defined and controlled with JavaScript, but I wanted to treat it separately because the way of animating inside this canvas is very different.
Here’s an example from Ana Tudor.
We’ll see in more detail how to animate in this element in future articles, as there’s a lot of potential… and you can’t even imagine if we bring the WebGL API or Shaders into play, you’ll see how much fun we’re going to have.
Resources
At the very general level I’ve talked about Web Animation, I would have to put many references. We’re going to see all these topics in detail one by one, so we’ll have the resources detailed in the following articles.
But I’ll leave you a link to People You Should Follow on CodePen, a list of artists that I think are very interesting to follow on CodePen.