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.

como fazer efeitos de transição suave no CSS3

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.

 

Resumo
Exemplos de como fazer um efeito ter a transição suave no CSS
Nome do Artigo
Exemplos de como fazer um efeito ter a transição suave no CSS
Descrição
Como utilizar a propriedade "transition" para criar uma transição suave no CSS, de cores, tamanho, animações, configurando os parâmetros como "duration"
Autor
Editor
Roger Mauricio Takemiya
Logo do Editor

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado.