Transition Timing Functions in CSS

« Prev Next »

CSS transition has a few built-in timing functions for pre-setting speed variations. Here are some of the most common of these timing functions:

 

  • ease: Default. Slow start, fast middle, slow end.
  • linear: Constant speed.
  • ease-in: Slow start.
  • ease-out: Fast start.
  • ease-in-out: Slow start, fast middle, slow end.

Example: Ease-In and Ease-Out

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ease Timing Function</title>
  <style>
    .circle {
      width: 100px;
      height: 100px;
      background-color: #9b59b6;
      border-radius: 50%;
      transition: transform 1s ease-in-out;
    }

    .circle:hover {
      transform: scale(1.5);
    }
  </style>
</head>
<body>
  <div class="circle"></div>
</body>
</html>
Run ›
  • The circle smoothly grows from 1 to 1.5 over 1 second, using the ease-in-out timing function.
  • This creates a smooth transition that starts slow, accelerates, and then decelerates towards the end.

Transition Delay

We can also add a delay for when a transition should start. If, for example, we wanted to delay a transition by 2 seconds before it starts, we would then add that delay like this:

 

transition: all 0.5s ease 2s;

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transition with Delay</title>
  <style>
    .delayed-box {
      width: 200px;
      height: 200px;
      background-color: #2ecc71;
      transition: all 0.5s ease 2s; /* 2s delay before transition starts */
    }

    .delayed-box:hover {
      background-color: #f39c12;
      width: 250px;
    }
  </style>
</head>
<body>
  <div class="delayed-box"></div>
</body>
</html>
Run ›
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.