Understanding CSS Transitions with Timing Functions

CSS transitions allow you to change property values smoothly (over a given duration), rather than having those properties change abruptly. One of the most powerful aspects of CSS transitions is the transition-timing-function, which defines the speed curve of the transition effect.

In this blog, we’ll dive into how to use transition-timing-function with a practical example of a button, and explore different timing functions to create smooth and appealing animations.

Creating a Basic Transition

To create a transition effect, you must specify two essential things:

The CSS Property You Want to Animate: This could be anything from background-color, width, height, opacity, etc.
The Duration of the Effect: This defines how long the transition will take, typically in seconds (s) or milliseconds (ms).

Syntax:

transition: [property] [duration] [timing-function] [delay];

Property: The CSS property you want to animate (e.g., background-color, width).
Duration: The time it takes to complete the transition (e.g., 0.3s).
Timing-function: (Optional) Defines the speed curve of the transition (ease, linear, etc.).
Delay: (Optional) Specifies a delay before the transition starts.

Example: Button with a Basic Transition

Let’s start with a simple example where we create a button that changes its background color when hovered over, using a transition effect.

<body>
    <h1>CSS Transitions with Timing Functions</h1>
    <button class="button">Hover over me</button>

    <p>Hover over the button to see the transition effect!</p>
</body>

.button {
  background-color: #4caf50;
  color: white;
  padding: 15px 32px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Specifying the property and duration */
}

.button:hover {
  background-color: #45a049;
}

Explanation of the Code

Property: Here, we are applying the transition to the background-color property. This means that when the background color changes (on hover, in this case), it will transition smoothly rather than changing instantly.

Duration: The 0.3s value sets the duration of the transition to 0.3 seconds. This means the background color will take 0.3 seconds to change from the initial color to the hover color.

Timing-function: We used ease for a smooth start and end to the transition.

Output:

See the Pen Button with a Basic Transition by Sunil Pradhan (@Sunil_Pradhan) on CodePen.

Exploring Transition Timing Function

The transition-timing-function property controls the pace of the transition, dictating how the intermediate states of the transition are calculated.

This property is crucial in defining whether the transition starts slowly, speeds up in the middle, and then slows down at the end—or any other pacing pattern you prefer.

Syntax:

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n);

Common Timing Functions

Ease: This is the default value. It starts slow, speeds up in the middle, and slows down at the end.
Linear: This transition moves at a constant speed from start to finish.
Ease-in: The transition starts slowly and speeds up towards the end.
Ease-out: The transition starts quickly and slows down towards the end.
Ease-in-out: The transition starts slowly, speeds up in the middle, and slows down at the end.
Cubic-bezier: This function allows you to define your own timing function by setting control points for the transition curve. You can generate custom cubic-bezier values using tools like the CSS Easing Generator.

Example: Button with Different Timing Functions

Let’s create a simple button and apply different transition-timing-function values to see how each affects the animation.

  <body>
    <h1>CSS Transitions with Timing Functions</h1>
    <button class="button linear">Linear</button>
    <button class="button ease-in">Ease-in</button>
    <button class="button ease-out">Ease-out</button>
    <button class="button ease-in-out">Ease-in-out</button>
    <button class="button custom-ease">Custom (Bounce)</button>

    <p>Hover over the buttons to see the different transition effects!</p>
  </body>

.button {
  background-color: #4caf50;
  color: white;
  padding: 15px 32px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Basic transition with ease timing */
}

.button:hover {
  background-color: #45a049;
}

.linear {
  transition-timing-function: linear;
}

.ease-in {
  transition-timing-function: ease-in;
}

.ease-out {
  transition-timing-function: ease-out;
}

.ease-in-out {
  transition-timing-function: ease-in-out;
}

.custom-ease {
  transition-timing-function: cubic-bezier(
    0.68,
    -0.55,
    0.27,
    1.55
  ); /* Custom bounce effect */
}

Output:

See the Pen Button with Different Timing Functions by Sunil Pradhan (@Sunil_Pradhan) on CodePen.

Conclusion

The transition-timing-function is a key property in CSS transitions that allows you to add polish to your UI animations. By understanding and utilizing different timing functions, you can create more engaging and visually appealing transitions for your web projects.

When creating transitions, always remember to specify the CSS property you want to animate and the duration of the effect. These two components are essential for building smooth, controlled animations.

For more in-depth details, you can also check out the W3Schools guide on CSS Transitions. And if you’re feeling adventurous, try creating your own cubic-bezier curves with the CSS Easing Generator.

Happy coding!