The CSS transition shorthand property is a powerful tool for animating changes to CSS properties. It combines four individual transition properties—transition-property, transition-duration, transition-timing-function, and transition-delay—into a single, concise declaration, making your code cleaner and more efficient.
Example 1: Simple Background Color Fade
/* This class defines the initial state of our button. */
.button-one {
background-color: #3498db; /* Blue background */
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
/* Shorthand for a 0.5-second transition on the background-color property with an ease-in-out timing function. */
transition: background-color 0.5s ease-in-out;
}
/* This defines the style of the button when a user hovers over it. */
.button-one:hover {
background-color: #2980b9; /* Darker blue background on hover */
}
Explanation: This code creates a smooth color fade effect when a user hovers over the button. The transition property is set to change the background-color over a period of 0.5s using an ease-in-out function, which creates a natural-looking acceleration and deceleration.
Example 2: Width and Opacity Transition with Delay
/* This class styles a simple div element. */
.box-two {
width: 100px;
height: 100px;
background-color: #e74c3c; /* Red background */
opacity: 1;
/* This shorthand transitions both the width and opacity properties. */
/* width: 1s duration, ease timing, 0s delay */
/* opacity: 0.5s duration, ease timing, 0.5s delay */
transition: width 1s ease, opacity 0.5s ease 0.5s;
}
/* On hover, the box will expand and fade out. */
.box-two:hover {
width: 200px;
opacity: 0;
}
Explanation: This example demonstrates transitioning multiple properties with different durations and delays. When hovered, the width immediately starts transitioning over 1s, while the opacity transition begins after a 0.5s delay and completes in 0.5s.
Example 3: Transform and Color Change on a Link
/* Styling for our link. */
.link-three {
color: #1abc9c; /* Teal color */
text-decoration: none;
font-size: 24px;
display: inline-block;
/* A transition is applied to the transform and color properties. */
transition: transform 0.3s linear, color 0.3s linear;
}
/* The link will scale up and change color on hover. */
.link-three:hover {
transform: scale(1.1); /* Enlarge the link */
color: #16a085; /* Darker teal color */
}
Explanation: Here, the transition property is used to animate a transform (scaling) and a color change simultaneously. Both transitions have a duration of 0.3s and a linear timing function, resulting in a constant speed for the animation.
Example 4: All Properties Transition with Cubic Bezier
/* The initial state of the circle. */
.circle-four {
width: 50px;
height: 50px;
background-color: #9b59b6; /* Purple background */
border-radius: 50%;
/* The 'all' keyword applies the transition to any animatable property that changes. */
/* The cubic-bezier function creates a custom easing effect. */
transition: all 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
/* On hover, the circle changes its size and background color. */
.circle-four:hover {
transform: scale(1.5);
background-color: #8e44ad; /* Darker purple */
}
Explanation: This code uses the all keyword to apply the transition to every animatable property that changes on hover. The cubic-bezier timing function provides a unique bounce effect, creating a more dynamic and engaging user experience than standard easing functions.
Example 5: Multiple Property Transitions with Different Timings
/* Styling for the animated panel. */
.panel-five {
width: 200px;
height: 150px;
background-color: #f1c40f; /* Yellow background */
border: 2px solid #f39c12; /* Orange border */
padding: 10px;
/* Multiple transitions are defined, separated by commas. */
transition: background-color 1s ease-out, border 0.5s linear, transform 0.8s ease-in-out;
}
/* The panel transforms and changes its background and border on hover. */
.panel-five:hover {
background-color: #f39c12; /* Orange background */
border: 2px solid #e67e22; /* Darker orange border */
transform: rotate(10deg); /* Rotates the panel */
}
Explanation: This example showcases how to define multiple, distinct transitions on a single element. The background-color, border, and transform properties each have their own duration and timing function, allowing for complex and layered animations.