Using CSS to add animation and transitions is a great way to add polish to an interface. Let’s discuss how adding one property can bring a bit of bounce to your transitions.

This article was originally published at Learnsome.co/blog/bouncy.

Want to learn more about CSS animation? Check out my new blog, cssanimation.rocks!

See it in action

https://vimeo.com/102265063

CSS Transitions

The CSS transition property tells the browser what aspects of an element to animate, if the element’s properties change. For example, an element might have a hover state with a different background color. In this case, applying a transition would tell the browser to animate the background color. A transition might look like this:

transition: all 0.6s ease-out

In this case, “all” refers to the property being transitioned, then “0.6s” refers to the duration of the animation, and “ease-out” is an example of the timing-function to apply. Different transitions can be added, with commas:

transition: opacity 0.6s ease-out, background 0.5s linear

Timing functions

We can use the timing-function part of the property to create different sorts of effects. The timing function can be one of the following values:

• linear
• ease-in
• ease-out
• ease-in-out
• cubic-bezier()
• step-start
• step-end
• steps()

My personal favourite is cubic-bezier, but let’s go through a few examples and see how they differ.

No transition

In this example, there is no transition. The state changes from one to another without any in-between frames.

Linear

transition: all 0.6s linear

A linear transition is a basic transition that moves smoothly from one state to another. There’s no acceleration, and the result is a little unnatural.

Easing

transition: all 0.6s ease-out

Easing is an animation technique where the rate of the animation changes. Animations ease-in by starting slow and then speeding up, and ease-out by slowing down toward their finish.

It’s a subtle effect at this speed, but can add a little polish to transitions if applied to faster animation.

Cubic Bezier

transition: all 0.6s cubic-bezier(.87,-.41,.19,1.44)

A cubic-bezier timing function allows us more flexibility. The ease functions are themselves created from cubic bezier curves, but by using the function directly we can create all sorts of transitions.

If you want to learn more about this, Rob LaPlaca does a good job explaining the logic. Personally, I like to use Lea Verou’s Cubic Bezier tool to generate them for me.

Have fun!

Transitions can be a great way to add some extra interactivity to your designs, and help them stand out from the crowd. If you’ve found some good tricks, be sure to let me know!