{"id":792,"date":"2024-04-29T11:50:57","date_gmt":"2024-04-29T14:50:57","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=792"},"modified":"2025-11-09T09:42:45","modified_gmt":"2025-11-09T12:42:45","slug":"transicoes-no-css","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/transicoes-no-css\/","title":{"rendered":"Transi\u00e7\u00f5es no CSS"},"content":{"rendered":"Tempo de leitura: <\/span> 3<\/span> minutos<\/span><\/span>\n

Transi\u00e7\u00f5es no CSS<\/strong>: As Transi\u00e7\u00f5es CSS<\/strong> s\u00e3o a ferramenta mais simples e eficiente para criar movimento na web<\/em>. Elas permitem definir a mudan\u00e7a suave<\/strong> de um estado CSS para outro (ex: de uma cor para outra, de um tamanho para outro) em resposta a uma intera\u00e7\u00e3o<\/strong> (como :hover<\/code>, :focus<\/code>, ou a adi\u00e7\u00e3o de uma classe via JavaScript).<\/p>\n\n\n\n

As transi\u00e7\u00f5es transformam mudan\u00e7as abruptas em movimentos fluidos, melhorando a experi\u00eancia do usu\u00e1rio.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. Funcionamento Essencial da Transi\u00e7\u00e3o<\/h2>\n\n\n\n

Para que uma transi\u00e7\u00e3o ocorra, s\u00e3o necess\u00e1rios dois elementos-chave:<\/p>\n\n\n\n

    \n
  1. Um Estado Inicial<\/strong> e um Estado Final<\/strong> (Geralmente definidos por pseudo-classes como :hover<\/code>).<\/li>\n\n\n\n
  2. A propriedade transition<\/code><\/strong> aplicada ao estado inicial, que informa o navegador como se mover entre os dois estados.<\/li>\n<\/ol>\n\n\n\n
    <\/div>\n\n\n\n

    Propriedades da Transi\u00e7\u00e3o<\/h3>\n\n\n\n
    Propriedade<\/strong><\/td>Fun\u00e7\u00e3o<\/strong><\/td>Exemplo<\/strong><\/td><\/tr><\/thead>
    transition-property<\/code><\/strong><\/td>Indica qual propriedade CSS deve ser animada (Ex: background-color<\/code>, transform<\/code>, all<\/code>).<\/td>opacity<\/code><\/td><\/tr>
    transition-duration<\/code><\/strong><\/td>Define o tempo que a transi\u00e7\u00e3o levar\u00e1 para ser conclu\u00edda.<\/td>0.4s<\/code> ou 400ms<\/code><\/td><\/tr>
    transition-timing-function<\/code><\/strong><\/td>Define a curva de velocidade<\/strong> (acelera\u00e7\u00e3o). Essencial para dar “sensa\u00e7\u00e3o” ao movimento.<\/td>ease<\/code> (Padr\u00e3o: Acelera, Desacelera)<\/td><\/tr>
    transition-delay<\/code><\/strong><\/td>Define um atraso antes que a transi\u00e7\u00e3o comece.<\/td>0.2s<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    <\/div>\n\n\n\n

    \ud83d\udd11 Sintaxe Recomendada (Shorthand)<\/h3>\n\n\n\n

    A shorthand<\/em> transition<\/code><\/strong> \u00e9 a forma mais limpa de declarar a regra:<\/p>\n\n\n\n

    CSS<\/p>\n\n\n\n

    \/* Sintaxe: [propriedade] [dura\u00e7\u00e3o] [curva] [atraso] *\/\n\n.botao {\n  background-color: blue;\n  \/* Transi\u00e7\u00e3o de cor em 0.5s com acelera\u00e7\u00e3o suave *\/\n  transition: background-color 0.5s ease-in-out; \n}\n\n.botao:hover {\n  \/* O estado final que dispara a transi\u00e7\u00e3o *\/\n  background-color: green;\n}\n<\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\n
    2. Tipos de Curva de Velocidade (transition-timing-function<\/code>)<\/h2>\n\n\n\n
    A curva de tempo define a velocidade da anima\u00e7\u00e3o em diferentes pontos, afetando a percep\u00e7\u00e3o de peso e fluidez:<\/p>\n\n\n\n