Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Introdução às Transições em CSS | Criando Transições Suaves em CSS
Técnicas Avançadas de CSS

bookIntrodução às Transições em CSS

Às vezes, é necessário criar animações para mudanças de elementos em uma página web, controlando fatores como velocidade, tempo de atraso e duração. Nesses casos, a propriedade transition pode ser utilizada para realizar essa tarefa.

O elemento sempre possui dois estados: inicial e final. É possível controlar o comportamento da mudança do elemento com o auxílio das seguintes propriedades:

transition-property: 
transition-duration:  
transition-timing-function: 
transition-delay: 
  • transition-property - O nome da propriedade CSS que deve ser animada;
  • transition-duration - O tempo durante o qual o estado do elemento deve ser alterado. Especificado em segundos (s) ou milissegundos (ms);
  • transition-timing-function - Especifica a curva de velocidade do efeito de transição. Valores típicos são ease, linear, ease-in, ease-out e ease-in-out;
  • transition-delay - O tempo de atraso antes do início do efeito de transição. Especificado em segundos (s) ou milissegundos (ms).

Cada propriedade será abordada em detalhes ao longo deste curso.

Nota

1 segundo = 1000 milissegundos. Portanto:

  • 0.1s = 100ms;
  • 2.5s = 2500ms;
  • 0.5s = 500ms.

Prática

Por exemplo, queremos adicionar um efeito de transition à cor de fundo do elemento div quando ele estiver em foco com o cursor. Nossa tarefa é:

  • Alterar a propriedade background-color;
  • O atraso deve ser de 0.1 segundos;
  • A mudança de cor deve durar 0.3 segundos;
  • Para a timing-function, espera-se o valor ease-in-out, o que significa que começará devagar, acelerará no meio e desacelerará novamente no final.

Passe o cursor sobre o elemento para ver o resultado.

index.html

index.html

index.css

index.css

copy

Especificamos todas as propriedades relacionadas à transição no elemento div e, em seguida, para o hover, definimos apenas a decoração que gostaríamos de visualizar.

question mark

Qual é o propósito da propriedade transition?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 1

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 2.04

bookIntrodução às Transições em CSS

Deslize para mostrar o menu

Às vezes, é necessário criar animações para mudanças de elementos em uma página web, controlando fatores como velocidade, tempo de atraso e duração. Nesses casos, a propriedade transition pode ser utilizada para realizar essa tarefa.

O elemento sempre possui dois estados: inicial e final. É possível controlar o comportamento da mudança do elemento com o auxílio das seguintes propriedades:

transition-property: 
transition-duration:  
transition-timing-function: 
transition-delay: 
  • transition-property - O nome da propriedade CSS que deve ser animada;
  • transition-duration - O tempo durante o qual o estado do elemento deve ser alterado. Especificado em segundos (s) ou milissegundos (ms);
  • transition-timing-function - Especifica a curva de velocidade do efeito de transição. Valores típicos são ease, linear, ease-in, ease-out e ease-in-out;
  • transition-delay - O tempo de atraso antes do início do efeito de transição. Especificado em segundos (s) ou milissegundos (ms).

Cada propriedade será abordada em detalhes ao longo deste curso.

Nota

1 segundo = 1000 milissegundos. Portanto:

  • 0.1s = 100ms;
  • 2.5s = 2500ms;
  • 0.5s = 500ms.

Prática

Por exemplo, queremos adicionar um efeito de transition à cor de fundo do elemento div quando ele estiver em foco com o cursor. Nossa tarefa é:

  • Alterar a propriedade background-color;
  • O atraso deve ser de 0.1 segundos;
  • A mudança de cor deve durar 0.3 segundos;
  • Para a timing-function, espera-se o valor ease-in-out, o que significa que começará devagar, acelerará no meio e desacelerará novamente no final.

Passe o cursor sobre o elemento para ver o resultado.

index.html

index.html

index.css

index.css

copy

Especificamos todas as propriedades relacionadas à transição no elemento div e, em seguida, para o hover, definimos apenas a decoração que gostaríamos de visualizar.

question mark

Qual é o propósito da propriedade transition?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 1
some-alt