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.
