WDD 231: Desenvolvimento Frontend para Web I

S04 - Atividades de Aprendizagem: Animações e Transições em CSS

Visão Geral

A propriedade animation em CSS permite que os desenvolvedores implementem animações sem a necessidade de usar JavaScript. Essas animações têm boa performance e funcionam bem para produzir transições suaves entre estados de estilo CSS pré-definidos, dentro de um tempo determinado.

A propriedade transition em CSS permite a interpolação suave de mudanças de estilo ao longo de um período determinado. Ao definir quais propriedades devem passar pela transição e o momento da transição, os desenvolvedores podem melhorar a experiência do usuário por meio de efeitos sutis e atrativos, acionados por mudanças no estado de um elemento.

Preparação

A seguir, explicamos as propriedades básicas do CSS para implementar efeitos visuais em páginas da web.

Keyframes

A regra @keyframes em CSS define as etapas de uma animação, especificando como os estilos de um elemento devem mudar ao longo do tempo.

Use @keyframes para criar uma animação, nomeando-a e definindo o que deve acontecer em diferentes pontos (chamados keyframes) durante a linha do tempo da animação, como em 0%, 50% ou 100%.

O exemplo abaixo mostra uma animação para um efeito de fade in:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
} 

Já o exemplo abaixo gera um efeito de fade color, passando da cor vermelha para a amarela:

@keyframes fadeColor {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
  }
}

Uma vez definida, a nova animação de keyframes precisa ser referenciada em uma regra de animação para que funcione, conforme mostrado abaixo.

Animações

A animação pode ser definida diretamente por meio da propriedade abreviada animation ou especificando qualquer uma de suas subpropriedades diretamente:

• animation-name: Especifica o nome da animação @keyframes a ser usada no elemento.
• animation-duration: Define quanto tempo a animação leva para completar um ciclo.
• animation-timing-function: Controla a curva de velocidade da animação, como linear ou ease-in.
• animation-delay: Define quanto tempo esperar antes da animação começar.
• animation-iteration-count: Especifica quantas vezes a animação deve ser repetida.
• animation-direction: Determina se a animação deve ser reproduzida para frente, para trás ou alternando as direções.
• animation-fill-mode: Define como os estilos são utilizados antes e depois da execução da animação.
• animation: Propriedade abreviada para especificar várias subpropriedades de animação de uma só vez:

  

O código abaixo usa a animação fadeIn definida acima em uma classe box:

.box {
  animation-name: fadeIn;
  animation-duration: 2s;
}

E o exemplo a seguir usa a animação fadeColor:

.box {
  width: 150px;
  height: 150px;
  background-color: red;

  /* Use a propriedade de animação abreviada */
  animation: fadeColor 2s ease-in-out infinite alternate;
}

Transições

Assim como na propriedade animation, existem várias regras para transições que podem ser definidas para cada subpropriedade de transição ou todas de uma vez, usando a propriedade abreviada transition.

As seguintes propriedades de transição estão disponíveis:

• transition-property: Especifica a propriedade ou propriedades CSS que devem fazer a transição quando forem alteradas.
• transition-duration: Define quanto tempo a transição leva para ser concluída.
• transition-timing-function: Controla a curva de velocidade da transição, como ease, linear, ease-in-out.
• transition-delay: Define quanto tempo esperar antes de iniciar a transição após uma alteração de propriedade.
• transition: Uma propriedade abreviada para todas as propriedades de transição.

O exemplo abaixo mostra uma transição suave de um fundo branco para um fundo azul claro em 0,5 segundos quando o usuário passa o mouse sobre a caixa:

.box {
  width: 200px;
  height: 200px;
  background-color: white;
  border: 1px solid #ccc;

  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: lightblue;
}

No exemplo adiante, quando o usuário passa o mouse sobre a caixa, a largura e a altura dela aumentam após um pequeno atraso, com um movimento suave para dentro e para fora:

.box {
  width: 100px;
  height: 100px;
  background-color: coral;
  transition: width 0.3s ease-in-out 0.2s, height 0.3s ease-in-out 0.2s;
}

.box:hover {
  width: 150px;
  height: 150px;
}

Transformação

A propriedade transform em CSS permite utilizar transformações 2D ou 3D em um elemento.

Funções de transformação comuns incluem:

• translate(x, y): Move o elemento para a esquerda/direita (x) e para cima/baixo (y).
• rotate(angle): Gira o elemento em um ângulo especificado (por exemplo, para girar em 45 graus: rotate(45deg)).
• scale(x, y): Redimensiona o elemento (por exemplo, scale(1.5) faz com que ele fique 150% maior).
• skew(x-angle, y-angle): Inclina o elemento ao longo do eixo x ou y.

O exemplo abaixo é uma regra de transformação que gira o elemento 15 graus, move-o 20 pixels para a direita e amplia seu tamanho para 120% do original.

.box {
  transform: rotate(15deg) translateX(20px) scale(1.2);
}

Vantagens

Usar CSS para animações traz muitas vantagens em comparação ao JavaScript ou algum outro meio.

• Desempenho: Utiliza a aceleração de hardware do navegador para gerar animações mais fluidas e otimizar o desempenho.
• Facilidade de Uso: É relativamente fácil de implementar.
• Flexibilidade: É usado para criar diversos tipos de animações.
• Compatibilidade com Navegadores: É compatível e possui funcionamento aceitável em navegadores mais antigos, sem comprometer a experiência do usuário.
• Acessibilidade: Proporciona dicas visuais e feedback aos usuários.

Instruções da Atividade

Crie cada uma das seguintes animações em CSS usando o CodePen ou criando uma página simples.

1. Use a abreviação de animation, @keyframes e transform para criar a seguinte animação de "carregando...":
   Avalie Seu Conhecimento

   Supõe-se neste código que existe uma div com o id de carregador

   #carregador {
     margin: 2rem;
     width: 50px;  /* largura do carregador */
     height: 50px; /* altura do carregador */
     border: 5px solid transparent; /* largura da borda */
     border-color: #999 transparent #999 transparent; /* cores de borda (4 - 2 transparentes) */
     border-radius: 50%; /* aspecto arredondado */
     animation: spin 1.5s linear infinite; /* animação de rotação com duração e contínua */
     box-shadow: 0 0 1rem rgb(0 0 255 / 40%); /* efeito de sombra azulada em div redondo */
   }
   
   #carregador::after {
     content: '⚙️';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     animation: pulse 1.5s ease-in-out infinite;
   }
   
   @keyframes spin {
     100% {transform: rotate(360deg);} /* gira 360 graus */
   }
   
   @keyframes pulse { /* pulsa o emoji de engrenagem */
     0%, 100% {transform: translate(-50%, -50%) scale(1);} /* muda de tamanho para 1 */
     50% {transform: translate(-50%, -50%) scale(1.25);} /* muda de tamanho para 1,25 */
   }

2. Agora use a propriedade transition para criar a seguinte animação, que é ativada quando o usuário passa o mouse sobre a imagem.
   Avalie Seu Conhecimento

   Supõe-se neste código que existe uma div com o id de carregador-t

   .carregador-t {
     /* a única coisa que mudou foi o uso de transition em vez de animation */
     transition: spin 1.5s linear infinite;
   }
           
   .carregador-t::after {
     /* a única coisa que mudou foi o uso de transition em vez de animation e o tamanho e a visibilidade no início */
     transform: translate(-50%, -50%) scale(0);
     transition: transform 1.5s ease-in-out;
     font-size: 2rem;
    }
   
   .carregador-t:hover {
     transform: rotate(360deg); /* Gira ao passar o mouse */
   }
   
   .carregador-t:hover::after {
     transform: translate(-50%, -50%) scale(1.5); /* Muda de tamanho ao passar o mouse */
   }

   A transição em CSS não pode ser executada em loop automaticamente como a animação.

Teste e Compartilhe

Teste suas atualizações e compartilhe seu trabalho com seus colegas no Microsoft Teams.