The transition-timing-function is a CSS property that dictates the speed curve of a transition effect. It allows you to control the acceleration and deceleration of a transition, making animations feel more natural and dynamic. By specifying different keyword values, you can change how an element transitions from one state to another over the transition-duration.
Example 1: ease (Default)
/* This is the default timing function if none is specified */
.box-ease {
width: 100px;
height: 100px;
background-color: #3498db;
transition: width 2s;
/* The transition starts slow, speeds up in the middle, then slows down at the end */
transition-timing-function: ease;
}
.box-ease:hover {
width: 300px;
}
Explanation The ease value creates a very common and natural-looking effect. The transition accelerates through the middle of its duration and then decelerates as it comes to an end.
Example 2: linear
/* A transition with a constant speed */
.box-linear {
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: width 2s;
/* The transition occurs at an even, constant speed from start to finish */
transition-timing-function: linear;
}
.box-linear:hover {
width: 300px;
}
Explanation With linear, the transition progresses at a constant speed without any acceleration or deceleration. This can sometimes look robotic but is useful for effects like continuous rotation or movement.
Example 3: ease-in
/* A transition that starts slowly */
.box-ease-in {
width: 100px;
height: 100px;
background-color: #2ecc71;
transition: width 2s;
/* The transition begins slowly and gradually accelerates until it's complete */
transition-timing-function: ease-in;
}
.box-ease-in:hover {
width: 300px;
}
Explanation The ease-in timing function causes the transition to start at a slow pace and then pick up speed as it progresses. This creates a sense of building momentum.
Example 4: ease-out
/* A transition that ends slowly */
.box-ease-out {
width: 100px;
height: 100px;
background-color: #f1c40f;
transition: width 2s;
/* The transition starts quickly and then decelerates towards the end */
transition-timing-function: ease-out;
}
.box-ease-out:hover {
width: 300px;
}
Explanation Contrary to ease-in, ease-out starts the transition at full speed and then slows down as it approaches its final state. This gives the effect of a gentle stop.
Example 5: ease-in-out
/* A transition that starts and ends slowly */
.box-ease-in-out {
width: 100px;
height: 100px;
background-color: #9b59b6;
transition: width 2s;
/* This combines ease-in and ease-out for a very smooth effect */
transition-timing-function: ease-in-out;
}
.box-ease-in-out:hover {
width: 300px;
}
Explanation This timing function provides a slow start, a faster middle, and a slow end. It's similar to ease but with a more symmetrical acceleration and deceleration curve.
Example 6: steps()
/* A stepped transition */
.box-steps {
width: 100px;
height: 100px;
background-color: #1abc9c;
transition: width 2s;
/* The transition jumps through 4 distinct steps over its duration */
transition-timing-function: steps(4, end);
}
.box-steps:hover {
width: 300px;
}
Explanation The steps() function breaks the transition into a specified number of intervals, creating a stuttered or frame-by-frame animation effect. steps(4, end) means the change happens in four distinct jumps.
Example 7: cubic-bezier()
/* A custom timing function for a unique bounce effect */
.box-cubic-bezier {
width: 100px;
height: 100px;
background-color: #e67e22;
transition: width 2s;
/* Defines a custom timing curve for a bounce effect at the end */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.box-cubic-bezier:hover {
width: 300px;
}
Explanation The cubic-bezier() function offers complete control over the timing by defining a custom curve. The values allow for complex effects like bouncing or elastic movements that are not possible with the standard keywords.