CSS-animations

CSS animations make it possible to do simple animations without JavaScript at all. JavaScript can be used to control CSS animations and make them even better, with little code.

CSS transitions [#css-transition]

The idea of CSS transitions is simple. We describe a property and how its changes should be animated. When the property changes, the browser paints the animation. That is, all we need is to change the property, and the fluid transition will be done by the browser. For instance, the CSS below animates changes of background-color for 3 seconds: Now if an element has .animated class, any change of background-color is animated during 3 seconds. Click the button below to animate the background: There are 4 properties to describe CSS transitions: - transition-property - transition-duration - transition-timing-function - transition-delay We’ll cover them in a moment, for now let’s note that the common transition property allows declaring them together in the order: property duration timing-function delay, as well as animating multiple properties at once. For instance, this button animates both color and font-size: Now, let’s cover animation properties one by one.

transition-property

In transition-property, we write a list of properties to animate, for instance: left, margin-left, height, color. Or we could write all, which means “animate all properties”. Do note that, there are properties which can not be animated. However, most of the generally used properties are animatable.

transition-duration

In transition-duration we can specify how long the animation should take. The time should be in CSS time format: in seconds s or milliseconds ms.

transition-delay

In transition-delay we can specify the delay before the animation. For instance, if transition-delay is 1s and transition-duration is 2s, then the animation starts 1 second after the property change and the total duration will be 2 seconds. Negative values are also possible. Then the animation is shown immediately, but the starting point of the animation will be after given value (time). For example, if transition-delay is -1s and transition-duration is 2s, then animation starts from the halfway point and total duration will be 1 second. Here the animation shifts numbers from 0 to 9 using CSS translate property: [codetabs src=“digits”] The transform property is animated like this: In the example above JavaScript adds the class .animate to the element – and the animation starts: We could also start it from somewhere in the middle of the transition, from an exact number, e.g. corresponding to the current second, using a negative transition-delay. Here if you click the digit – it starts the animation from the current second: [codetabs src=“digits-negative-delay”] JavaScript does it with an extra line:

transition-timing-function

The timing function describes how the animation process is distributed along its timeline. Will it start slowly and then go fast, or vice versa. It appears to be the most complicated property at first. But it becomes very simple if we devote a bit time to it. That property accepts two kinds of values: a Bezier curve or steps. Let’s start with the curve, as it’s used more often.

Bezier curve

The timing function can be set as a Bezier curve with 4 control points that satisfy the conditions: 1. First control point: (0,0). 2. Last control point: (1,1). 3. For intermediate points, the values of x must be in the interval 0..1, y can be anything. The syntax for a Bezier curve in CSS: cubic-bezier(x2, y2, x3, y3). Here we need to specify only 2nd and 3rd control points, because the 1st one is fixed to (0,0) and the 4th one is (1,1). The timing function describes how fast the animation process goes. - The x axis is the time: 0 – the start, 1 – the end of transition-duration. - The y axis specifies the completion of the process: 0 – the starting value of the property, 1 – the final value. The simplest variant is when the animation goes uniformly, with the same linear speed. That can be specified by the curve cubic-bezier(0, 0, 1, 1). Here’s how that curve looks: …As we can see, it’s just a straight line. As the time (x) passes, the completion (y) of the animation steadily goes from 0 to 1. The train in the example below goes from left to right with the permanent speed (click it): [codetabs src=“train-linear”] The CSS transition is based on that curve: …And how can we show a train slowing down? We can use another Bezier curve: cubic-bezier(0.0, 0.5, 0.5 ,1.0). The graph: As we can see, the process starts fast: the curve soars up high, and then slower and slower. Here’s the timing function in action (click the train): [codetabs src=“train”] CSS: There are several built-in curves: linear, ease, ease-in, ease-out and ease-in-out. The linear is a shorthand for cubic-bezier(0, 0, 1, 1) – a straight line, which we described above. Other names are shorthands for the following cubic-bezier: * – by default, if there’s no timing function, ease is used. So we could use ease-out for our slowing down train: But it looks a bit differently. A Bezier curve can make the animation exceed its range. The control points on the curve can have any y coordinates: even negative or huge ones. Then the Bezier curve would also extend very low or high, making the animation go beyond its normal range. In the example below the animation code is: The property left should animate from 100px to 400px. But if you click the train, you’ll see that: - First, the train goes back: left becomes less than 100px. - Then it goes forward, a little bit farther than 400px. - And then back again – to 400px. [codetabs src=“train-over”] Why it happens is pretty obvious if we look at the graph of the given Bezier curve: We moved the y coordinate of the 2nd point below zero, and for the 3rd point we made it over 1, so the curve goes out of the “regular” quadrant. The y is out of the “standard” range 0..1. As we know, y measures “the completion of the animation process”. The value y = 0 corresponds to the starting property value and y = 1 – the ending value. So values y<0 move the property beyond the starting left and y>1 – past the final left. That’s a “soft” variant for sure. If we put y values like -99 and 99 then the train would jump out of the range much more. But how do we make a Bezier curve for a specific task? There are many tools. - For instance, we can do it on the site https://cubic-bezier.com. - Browser developer tools also have special support for Bezier curves in CSS: 1. Open the developer tools with key:F12 (Mac: key:Cmd+Opt+I). 2. Select the Elements tab, then pay attention to the Styles sub-panel at the right side. 3. CSS properties with a word cubic-bezier will have an icon before this word. 4. Click this icon to edit the curve.

Steps

The timing function steps(number of steps[, start/end]) allows splitting an transition into multiple steps. Let’s see that in an example with digits. Here’s a list of digits, without any animations, just as a source: [codetabs src=“step-list”] In the HTML, a stripe of digits is enclosed into a fixed-length

.animated {
  transition-property: background-color;
  transition-duration: 3s;
}