CSS transitions are a way to create smooth and gradual animations between two states of an element. They allow you to change the values of CSS properties over a specified duration, giving your web page a more dynamic and interactive feel.
Transitions are used to create animations between two states of an element. They are defined using the transition
property in CSS. The transition
property specifies the CSS properties that should be animated, the duration of the animation, and the timing function that should be used to control the animation.
Here is an example of a simple transition:
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
}
.box:hover {
width: 200px;
}
</style>
<div class="box"></div>
In this example, we have a <div>
element with a class of box
. The transition
property is set to width 2s
, which means that any changes to the width
property of the .box
element will be animated over a duration of 2 seconds. When the .box
element is hovered over, the width
property is changed to 200px
, triggering the transition.
Here are some more examples of transitions:
You can transition multiple properties at once by separating them with commas:
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s, height 2s, background-color 2s;
}
.box:hover {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<div class="box"></div>
In this example, we are transitioning the width
, height
, and background-color
properties of the .box
element. When the .box
element is hovered over, the width
and height
properties are changed to 200px
, and the background-color
property is changed to blue
.
You can use different timing functions to control the speed of the transition. The default timing function is ease
, which starts slow, speeds up in the middle, and slows down again at the end. Here are some other timing functions you can use:
linear
: The animation progresses at a constant pace.ease-in
: The animation starts slow and speeds up at the end.ease-out
: The animation starts fast and slows down at the end.ease-in-out
: The animation starts slow, speeds up in the middle, and slows down again at the end.
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s ease-in-out;
}
.box:hover {
width: 200px;
}
</style>
<div class="box"></div>
In this example, we are using the ease-in-out
timing function to control the speed of the transition. When the .box
element is hovered over, the width
property is changed to 200px
, and the transition starts slow, speeds up in the middle, and slows down again at the end.
You can also add a delay to the transition using the transition-delay
property:
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s ease-in-out 1s;
}
.box:hover {
width: 200px;
}
</style>
<div class="box"></div>
In this example, we are adding a delay of 1 second to the transition using the transition-delay
property. When the .box
element is hovered over, the width
property is changed to 200px
, but the transition doesn't start until 1 second later.
You can also add different delays to different properties using the transition-delay
property:
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s ease-in-out 1s, height 2s ease-in-out 2s;
}
.box:hover {
width: 200px;
height: 200px;
}
</style>
<div class="box"></div>
In this example, we are adding a delay of 1 second to the width
property and a delay of 2 seconds to the height
property using the transition-delay
property. When the .box
element is hovered over, the width
and height
properties are changed, but the width
property starts transitioning 1 second later than the height
property.
CSS transitions are a powerful tool for creating dynamic and interactive web pages. They allow you to create smooth and gradual animations between two states of an element, giving your web page a more polished and professional look. By using different timing functions and delays, you can control the speed and timing of the transition, creating a wide range of effects and animations.