| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
The ‘
transition-timing-function‘ property in CSS is used to define the speed curve of a transition effect. It allows you to control how the intermediate states of the transition are calculated. The property can take several values including predefined keywords, functions, and custom cubic-bezier values.Values of transition-timing-function
1. ease: This is the default value. The transition starts slowly, speeds up in the middle, and slows down again before ending.
div {
transition-timing-function: ease;
}
2. linear: The transition has the same speed from start to finish.
div {
transition-timing-function: linear;
}
3. ease-in: The transition starts slowly and accelerates towards the end.
div {
transition-timing-function: ease-in;
}
4. ease-out: The transition starts quickly and decelerates towards the end.
div {
transition-timing-function: ease-out;
}
5. ease-in-out: The transition starts slowly, speeds up in the middle, and slows down again before ending (a combination of ease-in and ease-out).
div {
transition-timing-function: ease-in-out;
}
6. steps(): The transition jumps between steps rather than smoothly transitioning. You can specify the number of steps and the position of the steps.
div {
transition-timing-function: steps(4, start);
}
7. cubic-bezier(): Allows you to create your own timing function by defining a cubic-bezier curve. It takes four parameters, representing two control points for the bezier curve.
div {
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
Examples
Example 1: Ease Transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition: all 2s ease;
}
div:hover {
width: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
In this example, when you hover over the div, it will transition to double its width and change its background color to blue with an “ease” timing function.
Example 2: Linear Transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition: all 2s linear;
}
div:hover {
width: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Here, the transition will have a constant speed from start to finish.
Example 3: Custom Cubic Bezier Transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition: all 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
div:hover {
width: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
This example uses a custom cubic-bezier function to create a unique transition effect.
Visualizing ‘
cubic-bezier()‘To better understand cubic-bezier(), it’s useful to visualize the function on a graph where the x-axis represents time and the y-axis represents the progress of the transition. The four parameters in cubic-bezier(p1, p2, p3, p4) represent the control points of the curve:
p1andp3are the x-coordinates of the first and second control points, respectively.p2andp4are the y-coordinates of the first and second control points, respectively.
The coordinates are typically between 0 and 1, representing a percentage of the transition’s duration and progress.
By adjusting these points, you can create a wide variety of timing functions, from bounces to elastic effects. Tools like cubic-bezier.com can help you visualize and fine-tune these curves.
