Transições são uma forma de animação que é possível criar no CSS. É basicamente uma mudança suave de um estado para outro.

⏳ transition

A sintaxe básica dessa propriedade é:

transition: <property> <duration> <timing-function> <delay>;

property define qual propriedade será transicionada.

duration define quanto tempo durará a transição.

Onde a propriedade transition é definida define seu comportamento. Exemplos:

.button {
	transition: background-color 5s;
}

.button:hover {
	background-color: orangered;
}

.button {
	margin: 30px;
}

.button:hover {
	background-color: orangered;
	transition: background-color 5s;
}

Pode-se especificar mais de uma transição, separando-as por vírgula:

.button:hover {
	background-color: orangered;
	color: white
	transition: color 5s, background-color 5s;
}

O parâmetro timing-function representa uma função que especifica a taxa na qual a transição acontece: se começa devagar e termina rápido, se acelera e depois desacelera, …

transition: transform 2s ease-out;