Mastering CSS Transition Timing Functions

CSS transition timing function refers to the way in which an element changes its CSS property values over time during a CSS transition animation. It determines the pace or speed at which the transition occurs, and controls how the element's property values change from the starting state to the ending state.

In CSS, transitions are used to create smooth animations between different states of an element, such as changing its position, size, color, opacity, or other CSS properties. The timing function is a key aspect of CSS transitions as it controls the rate of change for these properties during the animation.

CSS timing functions are defined using cubic-bezier curves, which specify the rate of change over time with four control points. The most commonly used timing functions are predefined keywords, such as "ease", "linear", "ease-in", "ease-out", and "ease-in-out", which offer different acceleration and deceleration effects during the animation.

"ease": This is the default timing function, and it starts slow, accelerates in the middle, and slows down towards the end, creating a natural-looking animation.
"linear": This timing function provides a constant speed throughout the animation, with no acceleration or deceleration.
"ease-in": This timing function starts slow and accelerates towards the end, creating an animation that appears to start gradually and then pick up speed.
"ease-out": This timing function starts fast and decelerates towards the end, creating an animation that appears to slow down before reaching the end state.
"ease-in-out": This timing function starts slow, accelerates in the middle, and then decelerates towards the end, creating an animation that has a smooth transition in both the beginning and end phases.

In addition to these predefined timing functions, custom cubic-bezier curves can also be defined using specific control point values, allowing for more fine-grained control over the animation speed and easing effect.

By choosing the appropriate timing function, web designers and front-end developers can achieve different visual effects and create smooth, visually appealing animations that enhance the user experience on websites and web applications.

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /*
transition-timing-function
    ease
    Linear
    ease-in
    ease-out
    ease-in-out
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
*{
  margin: 0;
  padding: 0;
}

body{
  background: #eaeaea;
  color:#373737;
  font-family: 'Open Sans', sans-serif;
}

span{ 
  display: inline-block;
  margin-bottom: 20px;
}

.wrap{
  max-width: 750px;
  margin: 50px auto;
}

.container{
  padding: 15px;
  background-color: white;
  border:1px solid #aaa;
  margin-bottom: 15px;
}

.box{
  background-color: tomato;
  height: 70px;
  width: 75px;
  transition-property: transform;
  transition-duration: 1.8s;
  transition-delay: 0.5s;
}
.container:hover .box{
  transform: translateX(635px);
}

/*Constant Speed*/
.linear{ transition-timing-function: linear;}
/* Start Slow End Fast */
.ease-in{ transition-timing-function: ease-in;}
/* Start Fast  End Slow */
.ease-out{ transition-timing-function: ease-out;}
.ease-in-out{ transition-timing-function: ease-in-out;}

.cubic{ transition-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1);}
  </style>
</head>
<body>
  <div class="wrap">

    <span><b>ease </b>: specifies a transition effect with a slow start, then fast, then end slowly (this is default).</span>
    <div class="container">
      <div class="box ease"></div>
    </div>

    <span><b>linear </b>: specifies a transition effect with the same speed from start and end.</span>
    <div class="container">
      <div class="box linear"></div>
    </div>

    <span><b>ease-in</b> : specifies a transition effect with a slow start.</span>
    <div class="container">
      <div class="box ease-in"></div>
    </div>

    <span><b>ease-out</b> : specifies a transition effect with a slow end.</span>
    <div class="container">
      <div class="box ease-out"></div>
    </div>

    <span><b>ease-in-out</b> : specifies a transition effect with a slow start and end.</span>
    <div class="container">
      <div class="box ease-in-out"></div>
    </div>

    <span><b>cubic-bezier(n,n,n,n)</b> - lets you define your own values in a cubic-bezier function.</span>
    <div class="container">
      <div class="box cubic"></div>
    </div>


  </div>
</body>

</html>

Mastering CSS Transition Timing Functions

Source Code

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects