LabEx
EntrarJunte-se

Animação Zoom in Zoom Out

Intermediate

This tutorial is from open-source community. Access the source code

Introdução

Neste laboratório, exploraremos as animações CSS criando um efeito simples, mas eficaz, de zoom in e zoom out. As animações CSS permitem adicionar efeitos visuais dinâmicos às páginas web sem usar JavaScript. Ao final deste laboratório, você entenderá como usar keyframes CSS (quadros-chave) e propriedades de animação para criar transições suaves que podem aprimorar a experiência do usuário em seus websites.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível intermediário com uma taxa de conclusão de 75%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Compreendendo a Estrutura HTML

Antes de começarmos a criar nossa animação, precisamos entender a estrutura HTML com a qual trabalharemos. Nesta etapa, examinaremos o arquivo HTML fornecido e faremos as modificações necessárias.

  1. Abra o arquivo index.html no editor.

  2. Se o arquivo estiver vazio ou ausente, crie-o com o seguinte conteúdo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zoom In Zoom Out Animation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>CSS Animation Demo</h1>
    <p>This box demonstrates a zoom in zoom out animation:</p>

    <div class="zoom-in-out-box"></div>
  </body>
</html>

  1. Vamos entender o que este HTML faz:

    • Temos uma estrutura de documento HTML padrão com um título e configurações de viewport (área de visualização)
    • Vinculamos a um arquivo CSS externo chamado style.css
    • Incluímos um cabeçalho e um parágrafo para explicar nossa demonstração
    • Mais importante, temos um elemento <div> com a classe zoom-in-out-box que será animado

  2. Salve o arquivo index.html se você fez alguma alteração.

Este elemento div será nossa tela para criar a animação. Na próxima etapa, estilaremos este elemento usando CSS.

Estilização CSS Básica

Agora que temos nossa estrutura HTML em vigor, vamos criar a estilização CSS básica para o nosso elemento de animação.

  1. Abra o arquivo style.css no editor.

  2. Se o arquivo estiver vazio ou ausente, crie-o com o seguinte conteúdo:

body {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: #333;
}

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
}

  1. Vamos entender o que este CSS faz:

    • Definimos alguma estilização básica para a página (fonte, largura e margens)
    • Estilizamos o cabeçalho com uma cor cinza escuro
    • Para o nosso elemento de animação .zoom-in-out-box, nós:
      • Adicionamos uma margem de 24px ao redor dele
      • Definimos sua largura e altura para 50px
      • Damos a ele uma cor de fundo rosa vibrante

  2. Salve o arquivo style.css após fazer essas alterações.

  3. Para ver seu progresso, clique no botão "Go Live" no canto inferior direito do VSCode. Isso iniciará um servidor web na porta 8080. Em seguida, atualize a aba Web 8080 para ver sua caixa estilizada.

Você deve ver agora um pequeno quadrado rosa em sua página web. Este quadrado é o elemento que animaremos nos próximos passos.

Criando a Animação Keyframes

As animações CSS funcionam definindo keyframes (quadros-chave) que especificam os estilos que um elemento deve ter em vários pontos durante a sequência de animação. Vamos criar os keyframes para nossa animação de zoom in zoom out.

  1. Abra o arquivo style.css novamente e adicione o seguinte código no final:
@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

  1. Vamos entender o que este código faz:

    • @keyframes é uma at-rule (regra at) CSS que define os estágios e estilos de uma animação
    • zoom-in-zoom-out é o nome que damos à nossa animação (faremos referência a este nome mais tarde)
    • Dentro dos keyframes, definimos o que acontece em diferentes pontos da animação:
      • Em 0% (o início), o elemento está em seu tamanho normal com scale(1, 1)
      • Em 50% (no meio do caminho), o elemento cresce para 1,5 vezes seu tamanho com scale(1.5, 1.5)
      • Em 100% (o fim), o elemento retorna ao seu tamanho normal
    • A propriedade transform com a função scale() altera o tamanho do elemento

  2. Salve o arquivo style.css após adicionar esses keyframes.

Os keyframes definem o que nossa animação fará, mas ainda não a aplicamos ao nosso elemento. Na próxima etapa, conectaremos a animação à nossa caixa.

Aplicando a Animação

Agora que definimos nossos keyframes, precisamos aplicar a animação ao nosso elemento de caixa.

  1. Abra o arquivo style.css novamente e modifique o seletor .zoom-in-out-box da seguinte forma:
.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
  animation: zoom-in-zoom-out 1s ease infinite;
}

  1. Vamos entender a propriedade animation que adicionamos:

    • animation é uma propriedade abreviada (shorthand property) que define múltiplas propriedades de animação de uma vez
    • zoom-in-zoom-out é o nome da nossa animação de keyframes
    • 1s especifica que um ciclo da animação dura 1 segundo
    • ease é a função de temporização (timing function) que faz com que a animação comece lentamente, acelere e depois desacelere novamente
    • infinite significa que a animação se repetirá para sempre

  2. Salve o arquivo style.css após fazer essas alterações.

  3. Se o servidor web já estiver em execução, simplesmente atualize a aba Web 8080. Caso contrário, clique em "Go Live" no canto inferior direito para iniciar o servidor e, em seguida, abra a aba Web 8080.

Você deve ver agora seu quadrado rosa aumentando e diminuindo suavemente em uma animação contínua. O quadrado cresce até atingir 1,5 vezes seu tamanho original e, em seguida, encolhe de volta ao normal. Este ciclo se repete infinitamente.

Experimentando com Propriedades de Animação

Vamos personalizar nossa animação experimentando diferentes propriedades de animação. Isso ajudará você a entender como essas propriedades afetam o comportamento da animação.

  1. Abra o arquivo style.css e modifique o seletor .zoom-in-out-box para testar diferentes propriedades de animação:
.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
  animation: zoom-in-zoom-out 2s ease-in-out infinite;
  /* Add a slight rotation during the animation */
  border-radius: 10px;
}

  1. Vamos entender o que mudamos:

    • Estendemos a duração da animação para 2s (2 segundos)
    • Mudamos a função de temporização para ease-in-out, o que torna o início e o fim da animação suaves
    • Adicionamos um border-radius de 10px para arredondar os cantos da nossa caixa

  2. Vamos também modificar nossos keyframes para adicionar um efeito de rotação:

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1) rotate(0deg);
  }
  50% {
    transform: scale(1.5, 1.5) rotate(45deg);
    background-color: #2196f3;
  }
  100% {
    transform: scale(1, 1) rotate(0deg);
  }
}

  1. Nesta definição de keyframes atualizada:

    • Adicionamos uma função rotate() à propriedade transform
    • Na marca de 50%, o elemento agora gira 45 graus enquanto aumenta a escala
    • Também mudamos a cor de fundo para azul na marca de 50%

  2. Salve o arquivo style.css após fazer essas alterações.

  3. Atualize a aba Web 8080 para ver sua animação aprimorada.

Sua animação agora deve ser mais lenta (2 segundos por ciclo), ter cantos arredondados, girar enquanto aumenta o zoom e mudar de cor no meio da animação. Isso demonstra como as animações CSS podem combinar múltiplas mudanças de propriedade para efeitos visuais ricos.

Sinta-se à vontade para experimentar mais com diferentes propriedades e valores para ver como eles afetam sua animação.

Resumo

Parabéns por concluir o laboratório de Animação Zoom in Zoom Out! Neste laboratório, você aprendeu:

  1. Como estruturar HTML para uma animação CSS
  2. Como estilizar elementos usando propriedades CSS básicas
  3. Como criar animações de keyframes que definem os estágios de uma animação
  4. Como aplicar animações a elementos usando a propriedade animation
  5. Como personalizar animações ajustando o tempo, a suavização (easing) e combinando múltiplas mudanças de propriedade

Essas técnicas de animação CSS podem ser aplicadas para criar interfaces de usuário envolventes que respondem às interações do usuário ou chamam a atenção para elementos importantes em suas páginas web.

Para continuar sua jornada de aprendizado, considere explorar outras propriedades de animação como animation-delay, animation-direction e animation-fill-mode. Você também pode experimentar animar diferentes propriedades CSS além de transform, como opacity, position e size.