Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo
Fine-tuning CSS transitions with the transition-timing-function property

Book Description

CSS transitions are a great way to make your pages feel more interactive and dynamic. To control the pacing of those transitions, you need to use the transition-timing-function property. By using this property, you can specify easing rules with great granularity, so a transition can change speed as it's being executed.

Why is it important?

Default CSS transitions are linear and—let’s face it—boring. You need the transition-timing-function property to customize your transitions and enhance how your design feels to end users.

What you’ll learn—and how you can apply it

Understand the principles behind easing functions, and learn how to use the transition-timing-function property to employ different easing functions and customize their values.

This lesson is for you because…

  • You're a web designer or frontend developer who wants to make the most of your interactive page designs


  • Basic familiarity with HTML and CSS

Materials or downloads needed in advance

  • None