What is CSS Transition?
In CSS, there are several transition properties that allow you to control different aspects of how transitions are applied to elements. These properties define the duration, timing function, delay, and other characteristics of CSS transitions.
1. transition-property:
Specifies the CSS property you want to apply the transition effect to.
Syntax:
transition-property: property1, property2, ...;Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Property</title>
</head>
<body>
<button>Transition-property</button>
</body>
</html>/* Apply a transition to the background color of a button */
button {
background-color: blue;
transition-property: background-color;
}
/* When hovered, change the background color */
button:hover {
background-color: red;
}
Output:
2. Duration:
Specifies the duration over which the transition should occur. It’s specified in seconds (s) or milliseconds (ms).
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Property</title>
</head>
<body>
<button>Transition-property</button>
</body>
</html>button {
background-color: blue;
transition-property: background-color;
transition-duration: 5s;
}3. Timing function:
Specifies the speed curve of the transition effect. It defines how the intermediate values of the CSS property are calculated over time. Common timing functions include ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier().
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Property</title>
</head>
<body>
<button>Transition-property</button>
</body>
</html>button {
background-color: blue;
transition-property: background-color;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}4. Delay:
Optional. Specifies a delay before the transition effect starts. It’s also specified in seconds (s) or milliseconds (ms).
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Property</title>
</head>
<body>
<button>Transition-property</button>
</body>
</html> button {
background-color: blue;
transition-property: background-color;
transition-duration: 1s;
transition-timing-function: ease-in-out;
transition-delay:2s;
}5. Transition – Shorthand Property:
Optional. Specifies a delay before the transition effect starts. It’s also specified in seconds (s) or milliseconds (ms).
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Property</title>
</head>
<body>
<button>Transition-property</button>
</body>
</html> /* Apply a transition to the background color of a button */
button {
background-color: blue;
transition: property duration timing-function delay;
}
/* When hovered, change the background color */
button:hover {
background-color: red;
}
Using the shorthand transition property can help streamline your CSS code and make it more readable, especially when applying transitions to multiple properties on the same element.