Aula 7: Transições e animações CSS

Nesta palestra, exploraremos como dar vida às suas páginas da web usando transições e animações CSS. Essas técnicas permitem criar efeitos suaves e envolventes que melhoram a experiência do usuário sem a necessidade de JavaScript.

Introdução às transições CSS

As transições CSS permitem que você altere suavemente os valores das propriedades durante um período especificado. Eles são ideais para criar efeitos de foco, animações de botões e outros elementos interativos.

1. Sintaxe Básica

Para criar uma transição, você precisa especificar a propriedade CSS da transição, a duração e funções de atenuação opcionais.

• Exemplo:

  .button {
    background-color: #4CAF50;
    transition: background-color 0.3s ease;
  }

  .button:hover {
    background-color: #45a049;
  }

Neste exemplo, a cor de fundo do botão muda suavemente ao longo de 0,3 segundos quando você passa o mouse.

2. Transição de múltiplas propriedades

Você pode fazer a transição de várias propriedades de uma vez, separando-as com vírgulas.

• Exemplo:

  .box {
    width: 100px;
    height: 100px;
    background-color: #333;
    transition: width 0.5s, height 0.5s, background-color 0.5s;
  }

  .box:hover {
    width: 150px;
    height: 150px;
    background-color: #555;
  }

Este exemplo altera suavemente a largura, a altura e a cor de fundo da caixa ao passar o mouse.

3. Facilitando Funções

As funções de atenuação controlam a velocidade da transição em diferentes pontos, criando efeitos como atenuação, redução ou ambos.

• Funções de flexibilização comuns:
  • facilidade: começa devagar, depois acelera e depois desacelera novamente.
  • linear: mantém uma velocidade constante.
  • facilidade: começa lentamente e depois acelera.
  • facilidade: começa rapidamente e depois desacelera.

Introdução às animações CSS

As animações CSS permitem criar sequências mais complexas de alterações ao longo do tempo, além de simples transições. Você pode animar várias propriedades, controlar o tempo e criar quadros-chave para maior controle.

1. Sintaxe Básica

Para criar uma animação, defina quadros-chave e aplique-os a um elemento usando a propriedade de animação.

• Exemplo:

  @keyframes example {
    0% {background-color: red; left: 0px;}
    50% {background-color: yellow; left: 100px;}
    100% {background-color: green; left: 0px;}
  }

  .animate-box {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
    animation: example 5s infinite;
  }

Neste exemplo:

• A regra @keyframes define as etapas da animação, alterando a cor e a posição do fundo.
• A classe .animate-box aplica a animação, que dura 5 segundos e se repete infinitamente.

2. Controlando o tempo da animação

Você pode controlar o tempo, o atraso e a contagem de iterações de uma animação.

• Exemplo:

  .animate-box {
    animation: example 5s ease-in-out 1s 3 alternate;
  }

• 5s: Duração da animação.
• facilidade de entrada: função de facilitação.
• 1s: Atraso antes do início da animação.
• 3: A animação será repetida três vezes.
• alternativo: a animação inverterá a direção em cada iteração.

3. Combinando Transições e Animações

Você pode usar transições e animações juntas para criar efeitos mais dinâmicos.

• Exemplo:

  .button {
    background-color: #4CAF50;
    transition: transform 0.3s ease;
  }

  .button:hover {
    transform: scale(1.1);
  }

  @keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
  }

  .pulse-button {
    animation: pulse 1s infinite;
  }

Este exemplo:

• A classe .button usa uma transição para dimensionar levemente o botão ao passar o mouse.
• A classe .pulse-button usa uma animação para criar um efeito pulsante contínuo.

Exemplo Prático:

Vamos combinar transições e animações para criar um botão responsivo e interativo.

HTML:

Hover Me!

CSS:

.animated-button {
  padding: 15px 30px;
  font-size: 16px;
  color: white;
  background-color: #008CBA;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.animated-button:hover {
  background-color: #005f73;
  transform: translateY(-5px);
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.animated-button:active {
  animation: shake 0.5s;
}

Neste exemplo:

• O botão muda sua cor de fundo e se move ligeiramente para cima quando passa o mouse.
• Quando o botão é clicado, ele treme usando uma animação personalizada.

Praticar Exercício

1. Crie um efeito de foco para um link que mude de cor e adicione um sublinhado usando uma transição.
2. Crie uma animação de quadro-chave que mova um elemento em um círculo.
3. Combine transições e animações para criar um elemento interativo, como um botão ou um cartão, que é dimensionado, muda de cor ou é animado durante a interação.

Próximo: Na próxima palestra, exploraremos o CSS Flexbox Deep Dive, onde você aprenderá como utilizar totalmente o Flexbox para criar layouts avançados e responsivos. Fique atento!

siga-me no LinkedIn

Ridoy Hasan