Transições e Animações. 🌴 TRILHA CSS 🎨 Etapa 10

Academy Code Christ 0

 Seja muito bem-vindo à Academy Code Christ! 



🌍 Academy Code Christ está disponível em vários idiomas.
Fique à vontade para usar o tradutor na Barra lateral (Sidebar) 
e aprender no seu idioma.

📚 Continue sua jornada de aprendizado



A Academy Code Christ oferece trilhas de aprendizado em diferentes tecnologias. Explore os cursos, acompanhe as aulas e avance em sua jornada de conhecimento.  


📋 Menus correspondentes:



💻 Pratique o que você aprende

Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.


🎨 Etapa 10 


O que você vai aprender nesta aula?


Nessa aula, 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.



📚 Continue aprendendo CSS:


🎨 Etapa 1 👉  Introdução ao CSS

🎨 Etapa 3 👉 Box Model, Display e Posicionamento

🎨 Etapa 5 👉  Bordas, Sombreamentos e Efeitos Visuais

🎨 Etapa 6 👉 Pseudo-Classes e Pseudo-Elementos

🎨 Etapa 7 👉 Flexbox: Layouts Flexíveis e Responsivos

🎨 Etapa 8 👉 CSS Grid: Layouts de Grade Avançados

🎨 Etapa 9 👉 Responsividade eMedia Queries

🎨 Etapa 10 👉 Você está nessa Etapa

🎨 Etapa 11 👉 Gradientes, Sombras e Estilo Translúcido

🎨 Etapa 12 👉 Variáveis e Funções (CSS Custom Properties)

🎨 Etapa 13 👉 Layout Responsivo Completo com Grid, Flexbox e Media Queries

🎨 Etapa 14 👉 Boas Práticas, e Estrutura Profissional de Projeto CSS

🎨 Etapa 15 👉 Performance, Otimização e Boas Práticas Avançadas de CSS





Este conteúdo faz parte do Academy Code Christ. 

Um projeto criado para ajudar jovens e iniciantes a aprender programação do zero, de forma simples e gratuita.

Nossa missão é compartilhar conhecimento e incentivar mais pessoas a descobrir que também podem aprender tecnologia, criar projetos e desenvolver novas habilidades.
Todo o conteúdo é disponibilizado gratuitamente, de forma clara, prática e 
sem enrolação. 

Você pode apoiar o projeto se quiser 
com um café. 



Tags

Post a Comment

Postar um comentário

Postagem Anterior Próxima Postagem