Transition in css :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition in the css</title>
</head>
<style>
body{
background-color: black;
}
.bob{
display: flex;
height: 200px;
width: 300px;
background-color: yellow;
color: black;
justify-content: center;
align-items: center;
/* transition name put here */
transition: background-color;
/* transition duration means ye itne time me run hoga */
transition-duration: 2s;
/* isse aap alag alag effect de sakte o */
transition-timing-function: ease-in-out;
/* isse aap us transition ko delay laga sakte hai */
transition-delay: 1s;
/* transition short hand name , duration , timing-function,delay*/
transition: background-color 2s ease-in 1s;
/* agar apko uski saab property par transition lagana hai to aap name ki jagah all likh sakte hai */
transition: all 3s ease-out 2s;
}
#box:hover{
background-color: green;
color: white;
}
</style>
<body>
<div class="container">
<div class="bob" id="box">
This is the text here.
</div>
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.