transition-timining-function Archives

The CSS transition-timing-function property defines the speed curve of the transition effect.

The CSS transition-timing-function property allows a transition effect to change speed over its duration.

Demo:

Hover over the rectangles, to see the different transition effects:

linear

ease

ease-in

ease-out

ease-in-out

steps

Syntax:

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n);

linear – defines a transition effect with the same speed from start to end.

ease (default) – defines a transition effect with a slow start, then fast, then end slowly.

ease-in – defines a transition effect with a slow start.

ease-out – defines a transition effect with a slow end.

ease-in-out – defines a transition effect with a slow start and end.

step-start – equivalent to steps(1, start).

step-end – equivalent to steps(1, end).

steps (int, start | end) – define a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. The second parameter (optional), is either the value “start” or “end”, and specifies the point at which the change of values occur within the interval.

cubic-bezier (n, n, n, n) – specify your own values in the cubic-bezier function (numeric values from 0 to 1).

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
#square {
  width: 100px;
  height: 50px;
  background: #2a9d8f;
  display: flex;
  justify-content: center;
  font-size: 15px;
  align-items: center;
  color: white;
  font-weight: bold;
  transition: width 2s;
}

#square {transition-timing-function: linear;}

#square:hover {
  width: 300px;
}
</style>
</head>
<body>

<div id="square">linear</div>

</body>
</html>

Output:

Hover over the rectangle, to see the transition effect:

linear

Enjoy coding!

Hey, here’s something that might interest you:

CSS animation-timing-function Property

CSS Transition VS. CSS Animation

CSS Transition

The CSS cubic-bezier() function specifies a Cubic Bezier curve.

A Cubic Bezier curve is specified by four points (P0, P1, P2, P3). P0 and P3 are the starts and the end of the curve and, in CSS these points are fixed as the coordinates are ratios. P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state.

The cubic-bezier() function you can use with the transition-timing-function property and the animation-timing-function property.

Syntax:

cubic-bezier(x1,y1,x2,y2);

x1,y1,x2,y2 – numeric values (x1 and x2 must be a number from 0 to 1).

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
.square {
  width: 100px;
  height: 100px;
  background: #2a9d8f;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.8, 1.0, 0.2);
}

.square:hover {
  width:300px;
}
</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

Output:

Hover over the div element below, to see the transition effect:

Enjoy coding!