CSS learnning...

"Whenever this property changes, apply that change slowly."

The property transition: width 2s says “when the width changes, animate it over the course of 2 seconds.”

transition: all 0.5s says “when anything changes, spend 0.5s doing it.”

So if you want to round the corners of a button when it’s hovered?

/* Initial state: border-radius is 0.
 * When border-radius changes, it'll take 0.3s
 * instead of happening immediately */
button {
	border-radius: 0;
	transition: border-radius 0.3s;
	/* any other styles you need ... */
}
button:hover {
	border-radius: 20px;
}

　　Here’s the button:

.demo-button { transition: border-radius 0.3s; 
border: 1px solid dodgerblue; background-color: #fff; 
border-radius: 0; padding: 1em; color: dodgerblue; } 
.demo-button:hover { border-radius: 20px; }