Módulo 3 — Estilo e Interatividade

     🚧 Estamos preparando este módulo!

Olá! 👋

Você chegou até aqui porque está pronto para continuar sua jornada no Curso Css do Zero ao Avançado.

Por enquanto, este módulo ainda está sendo preparado. Estamos trabalhando no conteúdo para que ele seja apresentado de forma clara, prática e organizada, assim como as aulas anteriores.

📚 O conteúdo está a caminho!

Enquanto esta etapa não fica disponível, aproveite para revisar os módulos anteriores e praticar os exemplos, exercícios e desafios.

💻 Continue praticando.
🧠 Revise o que você já aprendeu.
🚀 E prepare-se para o próximo passo.

A página será atualizada assim que o conteúdo estiver pronto.

Obrigado pela sua paciência e por fazer parte da Academy Code Christ! ❤️

🎯 Lembre-se: aprender programação é uma jornada. Não tenha pressa. Pratique, experimente, erre, corrija e continue avançando.

🚀 Em breve: Módulo 3 — Trabalhando com Conteúdo

Bons estudos e até a próxima aula! 💻

 

   

Nesse Post você vai aprender a entender a diferença entre transições e animações; Aprender a usar propriedades transition e transform; Criar animações com @keyframes; Aplicar efeitos de hover suaves e microinterações; Construir componentes animados e modernos sem usar JavaScript.

🧠 Diferença entre Transição e Animação: Tipo Quando Usar Característica

Transition → Quando um estado muda (ex: hover, click) → Depende de um evento do usuário

Animation → Quando algo deve acontecer automaticamente (ex: banner, loader) Roda sozinha através dos keyframes

Transição só ocorre quando há mudança de estado.

Animação pode começar assim que a página carrega — ou quando você desejar.

⚙️ Propriedade transition

A propriedade transition define como e quanto tempo uma mudança suave vai durar entre os estados CSS.

Exemplo básico:

button {

  background: #0077ff;

  color: white;

  padding: 12px 24px;

  border: none;

  border-radius: 8px;

  cursor: pointer;

  transition: background 0.3s ease, transform 0.3s ease;

}

 

button:hover {

  background: #005fd4;

  transform: scale(1.05);

}

 

💡 Explicando:

●     transition: propriedade duração tipo

●     ease adiciona uma curva suave (você também pode usar linear, ease-in, ease-out, etc.)

💬 Você pode usar transition: all:

.box {

  transition: all 0.4s ease-in-out;

}

 

👉 Assim, qualquer mudança (cor, posição, sombra) é suavizada automaticamente.

🎚️ Propriedade transform

Com transform, é possível mover, girar, escalar ou inclinar elementos. Efeito Exemplo   Descrição

Mover →  translate(x, y)   →  Move o elemento

Escalar  → scale(x, y)   →  Aumenta ou reduz

Girar →   rotate(ângulo)  → Gira o elemento

Inclinar   →  skew(x, y)   →                Inclina nos eixos

Combinar   →    translate + rotate + scale    →  Combina efeitos

Exemplo:

.box:hover {

  transform: translateY(-10px) rotate(5deg);

}

 

💥 Um pequeno movimento e rotação que dá “vida” ao layout.

🔁 Introdução às Animações (@keyframes)

As animações CSS permitem definir uma sequência de mudanças ao longo do tempo.

Estrutura:

@keyframes nome-da-animacao {

  0%   { /* estado inicial */ }

  50%  { /* meio do caminho */ }

  100% { /* estado final */ }

}

 

Depois, você aplica com a propriedade animation:

.elemento {

  animation: nome-da-animacao duração tipo repetição;

}

Exemplo básico — animação de pulso

@keyframes pulsar {

  0% { transform: scale(1); }

  50% { transform: scale(1.1); }

  100% { transform: scale(1); }

}

 

button {

  background: #0077ff;

  border: none;

  border-radius: 10px;

  color: white;

  padding: 14px 24px;

  font-size: 16px;

  cursor: pointer;

  animation: pulsar 2s infinite ease-in-out;

}

 

💡 O botão cresce e volta ao normal suavemente, infinitamente.

🧩 Controlando o Ciclo das Animações: Propriedade  Função

animation-name  →   Nome da animação (referência ao @keyframes)

animation-duration  →  Duração total

animation-timing-function    →    Tipo de transição (ease, linear, ease-in, etc.)

animation-delay   →   Espera antes de começar

animation-iteration-count    →     Quantas vezes roda (1, infinite)

animation-direction    →          Direção alternada (normal, reverse, alternate)

animation-fill-mode   →           Mantém o estilo final (forwards, backwards, both)

Exemplo:

.elemento {

  animation: girar 3s linear infinite alternate;

}

📘 Para um melhor Aprendizado               🎯 Pratique com exercícios, desafios e projetos

💡 Exemplo Prático: Loader Animado

📄 HTML

<div class="loader"></div>

 

📄 CSS

.loader {

  width: 50px;

  height: 50px;

  border: 6px solid #ccc;

  border-top-color: #0077ff;

  border-radius: 50%;

  animation: girar 1s linear infinite;

}

 

@keyframes girar {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}

 

💥 Resultado: um ícone de carregamento girando, feito apenas com CSS!

🧱 Exemplo 2: Banner Deslizante

📄 HTML

<h1 class="slide">Bem-vindo ao Meu Site!</h1>

 

📄 CSS

.slide {

  opacity: 0;

  transform: translateY(50px);

  animation: subir 1.5s ease forwards;

}

 

@keyframes subir {

  0% {

opacity: 0;

transform: translateY(50px);

  }

  100% {

opacity: 1;

transform: translateY(0);

  }

}

 

💡 O título “entra” de forma suave — perfeito para introduções de página.

🎨 Exemplo 3: Card 3D com Hover Animado

📄 HTML

<div class="card">

  <h3>Design Avançado</h3>

  <p>Animações e interações modernas em CSS.</p>

</div>

 

📄 CSS

body {

  background: linear-gradient(135deg, #a2d2ff, #cdb4db);

  height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  font-family: 'Poppins', sans-serif;

}

 

.card {

  background: white;

  border-radius: 16px;

  padding: 40px;

  text-align: center;

  width: 280px;

  box-shadow: 0 10px 25px rgba(0,0,0,0.1);

  transition: transform 0.6s ease, box-shadow 0.6s ease;

}

 

.card:hover {

  transform: rotateY(10deg) translateY(-10px);

  box-shadow: 0 20px 40px rgba(0,0,0,0.2);

}

 

💎 Efeito: um cartão que flutua e gira levemente quando você passa o mouse — moderno e elegante.

⚡ Dica Extra — Biblioteca de Efeitos Prontos

Se quiser começar rápido:
  👉 Utilize Animate.css
  Uma biblioteca fácil de usar com dezenas de efeitos prontos.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

<h2 class="animate__animated animate__bounce">Olá Mundo!</h2>

🔥 Microinterações — Pequenos Detalhes, Grande Impacto

Pequenas animações ajudam o usuário a entender ações, como cliques e carregamentos.

Exemplos:

●     Botões que deslizam ou pulsam ao clicar;

●     Ícones que giram levemente;

●     Formulários com campos que destacam ao entrar em foco;

●     “Toasts” de notificação que aparecem suavemente.

Esses detalhes tornam o design mais humano e agradável.