Transition przykłady

<div class="square s-linear">linear</div>
<div class="square s-ease">ease</div>
<div class="square s-ease-in">ease-in</div>
<div class="square s-ease-out">ease-out</div>
<div class="square s-ease-in-out">ease-in-out</div>
<div class="square s-steps">steps</div>
<div class="square s-cubic">cubic</div>

.square {
	background: #289DCC;
	width: 150px;
	max-height: 100px;
	border-radius: 8px;
	text-align: center;
	color: white;
	padding: 8px;
	margin: 0 auto 5px auto;
	transition-property: width;
	transition-duration: 1s;
}

.square.s-linear { transition-timing-function: linear; }
.square.s-ease { transition-timing-function: ease; }
.square.s-ease-in { transition-timing-function: ease-in; }
.square.s-ease-out { transition-timing-function: ease-out; }
.square.s-ease-in-out { transition-timing-function: ease-in-out; }
.square.s-steps { transition-timing-function: steps(3); }
.square.s-cubic { transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }

.square:is(:hover, :focus) { width: 50%; }

<div class="item-1">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... </p>
</div>

.item-1 {
	background-color: #289DCC;
	color: white;
	transition: background-color 1000ms linear, color 700ms linear;
}

.item-1:hover {
	background-color: orangered;
	color: black;
}

<div class="item-2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... </p></div>

.item-2 {
    transition: all 0.3s ease;
}

.item-2:hover {
    box-shadow: inset 0 0 0 25px #f78de7;
}

<div class="item-3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... </p></div>

.item-3 {
	transition: all 0.3s ease;
}

.item-3:hover {
	border-radius: 50%;
}