1. Como utilizar o CSS transition

1.1. Para criar um efeito de transição entre estilos é necessário definir pelo menos:

• A propriedade CSS que você quer adicionar no efeito.
• A duração do efeito.

1.2. Veja no exemplo abaixo onde vamos fazer uma mudança de estilo sem o efeito de transição:

HTML

<div class="demo"></div>

CSS

.demo {
  width: 100px;
  height: 100px;
  background: red;
}
.demo:hover {
  width: 300px;
}

See the Pen GRpBpNj by Angelo Luis Ferreira (@angeloalf) on CodePen.

1.3. Veja o mesmo exemplo agora com um efeito de transição mais suave:

HTML

<div class="demo"></div>

CSS

.demo {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}
.demo:hover {
  width: 300px;  
}

Veja como fica o efeito de transição do exemplo acima:

See the Pen css with transition by Angelo Luis Ferreira (@angeloalf) on CodePen.

Observações:

a) Para criar o efeito de transição definimos a propriedade (width) e a duração (2s): transition: width 2s;

b) Poderíamos utilizar também as propriedades distintas: transition-property: width; e transition-duration: 2s;

.demo {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: width;
  transition-duration: 2s;
}
.demo:hover {
  width: 300px;  
}

2. CSS Transitions com várias propriedades

2.1. O exemplo a seguir adiciona um efeito de transição para a propriedade width, height e opacity, com duração de 2 segundos para width, 4 segundos para a height e 6 segundos para opacity:

HTML

<div class="demo"></div>

CSS

.demo {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s, opacity 6s;
}
.demo:hover {
  width: 300px;
  height: 250px;
  opacity: 0.1;
}

Veja como fica o efeito de transição utilizando várias propriedades:

See the Pen zYvLmgL by Angelo Luis Ferreira (@angeloalf) on CodePen.

3. Atraso no efeito de transição (delay)

3.1. A propriedade transition-delay especifica um atraso, em segundos, no efeito de transição. Veja o exemplo a seguir que atrasamos 1 segundo o início de cada transição.

HTML

<div class="demo"></div>

CSS

.demo {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-delay: 1s;
}
.demo:hover {
  width: 300px;  
}

Veja como fica o efeito com delay:

See the Pen CSS transition com delay by Angelo Luis Ferreira (@angeloalf) on CodePen.

4. Efeito transition com transform

4.1. Neste exemplo vamos acrescentar o efeito "transform" na transição:

4.1 Observe que acrescentamos a propriedade tranform para rotacionar o elemento em 180º.

HTML

<div class="demo"></div>

CSS

.demo {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

.demo:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}

Veja como nosso exemplo com o efeito transform:

See the Pen Transition com transform by Angelo Luis Ferreira (@angeloalf) on CodePen.

5. Velocidade da curva de transição

5.1. A propriedade transition-timing-function especifica como a transição progride no tempo (o padrão é ease). A propriedade pode ter os seguintes valores pré-definidos:

• ease - especifica um efeito de transição com início lento, rápido e final lento (esse é o padrão)
• linear -especifica um efeito de transição com a mesma velocidade do início ao fim)
• ease-in - especifica um efeito de transição com um início lento
• ease-out - especifica um efeito de transição com um final lento
• ease-in-out - especifica um efeito de transição com início e término lentos
• cubic-bezier(n,n,n,n) - permite definir seus próprios valores em uma função cubic-bezier 

5.2. Para visualizar os efeitos de transição com os vários tipos de velocidade, acesse o link: https://matthewlein.com/tools/ceaser 

TENTE VOCÊ MESMO

No nosso editor HTML, altere os valores de um exemplo de um menu horizontal. Clique no link abaixo para abrir nosso editor de testes. (Não esqueça de clicar no botão "Executar" para visualizar os resultados após modificar o código).

Tente você mesmo »

Documentação Oficial

1. [transitions] » MDN Web Docs - Mozilla

2. [CSS Transitions] » W3C Working Draft

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários