tips

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 to this post? Send me the URL here: