CSS transitions are a way to add animated effects to web page elements when they change state, such as when they are hovered over or clicked. With CSS transitions, you can specify how the transition should occur over a set period of time, and what properties should be transitioned.
Transitions can be applied to a wide range of CSS properties, including colors, backgrounds, borders, sizes, and positions. When a transition is triggered, the property values are gradually changed over the specified time period, creating a smooth animated effect.
CSS Transitions allow elements to gradually change from one style to another. They are used to add visual effects to webpages, such as fading in/out, scaling, rotating, and more. CSS Transitions are triggered when an element’s state changes (e.g. when it is hovered over, clicked on, etc). These transitions require the use of CSS properties like transition-property, transition-duration, transition-timing-function, and transition-delay.
Few examples of CSS Transitions
Hover Effect on Links
a {
transition: color 0.5s ease;
color: #007bff;
}
a:hover {
color: #28a745;
}
In this example, we’re adding a transition effect to links on the page. We’re using the transition property to specify that the color property should transition over a period of 0.5 seconds, and have an easing effect to make the transition smooth. When the link is hovered over, the color property is changed to #28a745, triggering the transition and animating the color change.
Changing Image Opacity
img {
transition: opacity 0.5s ease;
opacity: 1;
}
img:hover {
opacity: 0.5;
}
In this example, we’re adding a transition effect to an image on the page. We’re using the transition property to specify that the opacity property should transition over a period of 0.5 seconds, and have an easing effect. When the image is hovered over, the opacity property is changed to 0.5, triggering the transition and animating the opacity change.
Expanding and Shrinking Div
div {
transition: width 0.5s ease, height 0.5s ease;
width: 200px;
height: 200px;
}
div:hover {
width: 300px;
height: 300px;
}
In this example, we’re adding a transition effect to a div element on the page. We’re using the transition property to specify that the width and height properties should transition over a period of 0.5 seconds, and have an easing effect. When the div is hovered over, the width and height properties are changed to 300px, triggering the transition and animating the expansion of the div.
Changing Font Size
h1 {
transition: font-size 0.5s ease;
font-size: 32px;
}
h1:hover {
font-size: 48px;
}
In this example, we’re adding a transition effect to a h1 heading element on the page. We’re using the transition property to specify that the font-size property should transition over a period of 0.5 seconds, and have an easing effect. When the h1 is hovered over, the font-size property is changed to 48px, triggering the transition and animating the increase in font size.
Changing Background Color on Button Click
button {
transition: background-color 0.5s ease;
background-color: #007bff;
color: #ffffff;
}
button:active {
background-color: #28a745;
}
In this example, we’re adding a transition effect to a button element on the page. We’re using the transition property to specify that the background-color property should transition over a period of 0.5 seconds, and have an easing effect. When the button is clicked and held down, the background-color property is changed to #28a745, triggering the transition and animating the color change.
Changing Border Radius
div {
transition: border-radius 0.5s ease;
border-radius: 10px;
}
div:hover {
border-radius: 50%;
}
In this example, we’re adding a transition effect to a div element on the page. We’re using the transition property to specify that the border-radius property should transition over a period of 0.5 seconds, and have an easing effect. When the div is hovered over, the border-radius property is changed to 50%, triggering the transition and animating the change in border radius.
Rotating an Image
img {
transition: transform 0.5s ease;
transform: rotate(0deg);
}
img:hover {
transform: rotate(360deg);
}
In this example, we’re adding a transition effect to an image on the page. We’re using the transition property to specify that the transform property should transition over a period of 0.5 seconds, and have an easing effect. When the image is hovered over, the transform property is changed to rotate(360deg), triggering the transition and animating the rotation of the image.
Changing Opacity on Button Hover
button {
transition: opacity 0.5s ease;
opacity: 1;
}
button:hover {
opacity: 0.5;
}
In this example, we’re adding a transition effect to a button element on the page. We’re using the transition property to specify that the opacity property should transition over a period of 0.5 seconds, and have an easing effect. When the button is hovered over, the opacity property is changed to 0.5, triggering the transition and animating the opacity change.
Changing Position of an Element
div {
transition: left 0.5s ease;
position: absolute;
left: 0;
top: 0;
}
div:hover {
left: 50%;
}
In this example, we’re adding a transition effect to a div element on the page. We’re using the transition property to specify that the left property should transition over a period of 0.5 seconds, and have an easing effect. When the div is hovered over, the left property is changed to 50%, triggering the transition and animating the movement of the element to the center of the page.
Changing Box Shadow on Hover
div {
transition: box-shadow 0.5s ease;
box-shadow: 0 0 10px #ccc;
}
div:hover {
box-shadow: 0 0 20px #007bff;
}
In this example, we’re adding a transition effect to a div element on the page. We’re using the transition property to specify that the box-shadow property should transition over a period of 0.5 seconds, and have an easing effect. When the div is hovered over, the box-shadow property is changed to 0 0 20px #007bff, triggering the transition and animating the increase in box shadow size and color.