Efeitos de transição suave no CSS

Exemplos de efeitos de transição suave no CSS que permitem que mudança de cor ou tamanho de um elemento (exemplos) sejam feitas suavemente, melhorando o aspecto da animação desejada.

Utilizando a propriedade “transition” para fazer a transição suave no CSS.

Para aplicar um efeito de transição suave, teremos que utilizar a propriedade “transition” no elemento.

Exemplo:

.t {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s
}

Na minha classe “.t” estou configurando a propriedade transition (já com a compatibilidade com os principais browsers) para que qualquer mudança “efeito” ocorra na duração de 0.5 segundos.

Nesta propriedade é possível passar além do tempo de transição, mais 3 valores:

• transition-duration (utilizado no exemplo acima)
• transition-property
• transition-timing-function
• transition-delay.

Vamos repassar cada uma.

transition-duration

Duração da animação em segundos

Exemplo:

ul {
    transition-duration: 3s;
}

Este parâmetro é obrigatório, sem ele não será feita a suavização, pois por padrão seu valor é 0 (zero).

transition-property

É a propriedade no qual será aplicada a transição suave, por padrão é aplicado em todos. Utilize apenas quando você quiser limitar a apenas uma propriedade o efeito. Não é obrigatório.

Exemplo:

p {
    transition-property: width;
}

transition-timing-function

Esse parâmetro especifica a curva da velocidade no qual a transição irá ocorrer. Se irá começar mais rápido e depois desacelerar para completar o tempo definido na duração, etc.

Exemplo:

label {
    transition-timing-function: linear;
}

Valores possíveis: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

Por padrão o valor é “linear”, aonde a animação será distribuída uniformemente durante toda duração.

Não é um campo obrigatório.

transition-delay.

Tempo que será esperado até começar a animação, esse tempo não é contabilizado na duração da animação.

Exemplo:

span {
    transition-delay: 2s;
}

Não é obrigatório.

Juntando tudo em uma linha

Além de declarar cada propriedade separadamente, você pode agrupar todas as configurações utilizando apenas a palavra “transition”.

Exemplo:

div { transition: |property| |duration| |timing-function| |delay|; }

Os valores deverão seguir exatamente esta ordem.

Por exemplo, se você não for informar “property” e o “timing-function” o código deverá ficar desta forma.

div { transition: 2s 0.5s; }

Aonde temos 2 segundos para duração e 0.5 segundos de “delay” para começar a transição suave no CSS.