Introduçã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ãoease
,linear
,ease-in
,ease-out
eease-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.1
s =100
ms;2.5
s =2500
ms;0.5
s =500
ms.
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 valorease-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.css
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.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 2.04
Introduçã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ãoease
,linear
,ease-in
,ease-out
eease-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.1
s =100
ms;2.5
s =2500
ms;0.5
s =500
ms.
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 valorease-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.css
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.
Obrigado pelo seu feedback!