mirror of
https://github.com/cssanimation/css-animation-101.git
synced 2025-01-17 06:48:13 +01:00
93 lines
5.0 KiB
Markdown
93 lines
5.0 KiB
Markdown
# Timing functions
|
|
|
|
The timing function is a description of the rate at which the speed of the transition changes. Animations look lifeless when they occur at a fixed, linear pace. Using timing functions can make transitions more life-like.
|
|
|
|
For example, [here is an example of a transition using a `linear` timing function](https://codepen.io/donovanh/pen/vMPgmd). It moves back and forth at an unchanging pace.
|
|
|
|
Contrast this to [this example using cubic-bezier timing functions](https://codepen.io/donovanh/pen/Zbjbrx). You'll see quite a big difference!
|
|
|
|
For this example we're using customised `cubic-bezier` timing function:
|
|
|
|
|
|
|
|
The `cubic-bezier` approach in this case tells the animation to rock back a little before quickly moving to the second state, and actually goes a little past it before correcting back.
|
|
|
|
The CSS for the beginning and hover state of each example is the same, all that's changed is the timing function.
|
|
|
|
Let's go through each and learn how they impact the way our elements move.
|
|
|
|
If you'd like to play with these in an example, I've set up [a CodePen here](http://codepen.io/donovanh/pen/GgaRNv).
|
|
|
|
## Linear
|
|
|
|
|
|
|
|
A linear transition moves at a steady rate from beginning to end. Since there's no curve in the transition, it never accelerates or decelerates. This can be useful if making animations that need a steady movement, like the scenery moving past the background of a train window or a steadily rotating moon.
|
|
|
|
## Ease-in
|
|
|
|
|
|
|
|
The ease-in timing function begins slowly and accelerates toward the end of the transition. It would be similar to a ball beginning to roll down a hill, finishing at the fastest speed at the bottom. Or perhaps a bored fish swimming left and right.
|
|
|
|
## Ease-out
|
|
|
|
|
|
|
|
Ease-out is the opposite of ease-in. It starts fast and slows down toward the end of the transition. Useful for when something needs to appear as if it was rushing from off-screen and slowing down to stop.
|
|
|
|
## Ease-in-out
|
|
|
|
|
|
|
|
Ease-in-out is a combination of both the ease-in and ease-out functions. It begins slowly, accelerates through the middle part of the transition, then slows toward the end. It could illustrate a car starting from a standstill, accelerating, then slowing down before stopping. If making a loading animation, something like this can look pretty good.
|
|
|
|
## Cubic-bezier
|
|
|
|
|
|
|
|
All the timing functions we've seen so far are examples of cubic bezier curve. This is a curve that describes the "shape" of the timing function.
|
|
|
|
In this way, specifying a `cubic-bezier` timing function is like creating a timing function of our own.
|
|
|
|
They consist of 4 values, representing two co-ordinates. A cubic-bezier can look like this:
|
|
|
|
transition-timing-function: cubic-bezier(1,-0.49,.13,1.09);
|
|
|
|
The two co-ordinates here are (1, -0.49) and (.13, 1.09). On a graph, they look like this:
|
|
|
|
|
|
|
|
Rather than create these by hand, I use [cubic-bezier.com](http://cubic-bezier.com). A great way to create some interesting effects.
|
|
|
|
They really get fun when using values greater than 1. This will create transitions that overshoot and bounce back.
|
|
|
|
## Steps
|
|
|
|
|
|
|
|
Where most of the timing functions involve curves, the steps function divides the transition into a set of steps and jumps between each. For example, if you specify `steps(4)` the transition divides the duration into 4 discrete jumps (pictured above).
|
|
|
|
|
|
|
|
This is useful for sprite animation. For example, a loading spinner or animated video game character. By setting the background position at the beginning of a series of frames, the steps timing function can then be used to jump through each frame and create the appearance of movement.
|
|
|
|
To see a good example of this in action, check out the [Twitter fave button](https://cssanimation.rocks/twitter-fave/) animation.
|
|
|
|
You can also specify whether the transition holds the first frame for the fragment of the duration or whether it holds the final frame. The default is `end`, as this assumes that the first frame in the sprite is already showing before the animation begins.
|
|
|
|
We can specify which applies when setting the steps:
|
|
|
|
transition: all 2s steps(10, start);
|
|
transition: all 2s steps(10, end);
|
|
|
|
## More examples
|
|
|
|
I've written on the subject of [timing functions here](https://medium.com/css-tutorials/bouncy-transitions-c0c8085d489) if you'd like to read more and see other examples.
|
|
|
|
## Homework
|
|
|
|
Following on from [the previous homework example](http://codepen.io/donovanh/pen/NPYNGa?editors=110) try changing the `transition-timing-function` value and see how it changes the way the transition feels.
|
|
|
|
You can also try changing values on [this demo](http://codepen.io/donovanh/pen/GgaRNv). Technically this is an animation rather than a transition but the timing function applies in the same way.
|