CSS : transition

Shortcut properties that specify the transition effect of an element

transition-property / transition-duration / transition-timing-function / transition-delay

• transition-property: Specifies the name of the property to use the transition effect for

div {
	width: 100px;
	height: 100px;
	background-color: orange;
	transition: width 1s; => Only the horizontal length changes naturally
}

div:active {
	width: 300px;
	background-color: royalblue
}

• transition-durtaion: Specifies the duration of the transition effect

div {
	width: 100px;
	height: 100px;
	background-color: orange;
	transition: 
		width .5s,
		background-color 2s; 
}

• transition-timing-function: Specifies the easing function of the transition effect

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

transition-timing-function - CSS: Cascading Style Sheets | MDN

• transition-delay: Specifies how many seconds to wait for the transition effect to start

div {
	width: 100px;
	height: 100px;
	background-color: orange;
	transition: 1s .5s; => It runs after 0.5 seconds.
}