Transitions are useful to have a smooth view of what's going on. Probably, you don't want your hover effect to be right away, you would want it to go on for seconds. So, here's where transition comes in. You can use it like this,
From the previous example
<style>
div {
width:
400px;
height: 400px;
background-color:
blue;
transition: 0.5s;
}
div:hover {
background-color: red;
}
</style>
🤩 This makes your hover effect to respond over the time period of 0.5seconds.
