robohash image acting as kam's profile photo

Tip 011 - Transitions


A transition is like CSS Animation Lite Edition. With a transition, you provide a CSS property that is going to change somehow (say, on focus), then details about how the transition happens, including duration and easing. You can also set a delay, which will run a timer before actually starting the movement. All of that together has a shorthand, shown in the example:

button {
  background-color: blue;
  transition: background-color 400ms ease .5s;
button:focus {
  background-color: lightblue;

As usual, there's some gotchas. The property you're trying to animate has to be animatable. animating to and from auto could result is weirdness, depending of the situation. Documentation ahoy!


Have you written a reply on another site? Put the URL here: