Animações e Transições

Introdução

No movimentado mundo da "Pet's House", um santuário virtual para amantes de animais de estimação, Taylor, um designer web criativo, embarca em uma jornada para dar vida ao site.

Este laboratório utiliza animações e transições CSS para aprimorar a experiência do usuário, tornando o site informativo, envolvente e dinâmico. Taylor tem como objetivo transformar elementos estáticos em recursos interativos que cativam os visitantes, guiando-os por uma jornada memorável no reino digital do cuidado com animais de estimação.

Pseudo-elemento

Na barra de navegação na página Pet, ao passar o mouse sobre um item de navegação, uma linha sublinhada aparece para aquele item de navegação.

Devemos pensar em como esse efeito é alcançado, a exibição e o ocultamento?

O pseudo-elemento ::after do CSS é uma ferramenta poderosa que permite aos desenvolvedores inserir conteúdo ou decorações adicionais após o conteúdo de um elemento selecionado. Este método pode ser usado para uma variedade de tarefas de design e layout, como adicionar elementos decorativos, criar separações claras de layout ou inserir conteúdo sem modificar a estrutura HTML. Aqui está um tutorial sobre como usar o pseudo-elemento ::after do CSS.

::after é um pseudo-elemento que permite inserir conteúdo adicional no final do conteúdo de um elemento. Este conteúdo é, por padrão, um elemento inline.

selector::after {
  /* Propriedades CSS */
}

Use a propriedade content para especificar o conteúdo a ser inserido. Isso pode ser texto, imagens ou outras propriedades CSS.

Por exemplo, adicione um coração vermelho após o elemento <p>:

Podemos implementar um efeito de sublinhado usando ::after adicionando o seguinte ao CSS:

.navigation li::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: black;
}

Atualmente, nada mudou na página porque a largura é 0. Em seguida, usaremos :hover para alcançar o efeito de sublinhado, alterando a largura para 100% quando o mouse passar sobre o elemento.

Pseudo-classe

O seletor de pseudo-classe :hover do CSS é usado para selecionar elementos sobre os quais o ponteiro do mouse passa. Isso permite que os desenvolvedores forneçam feedback visual para interações do usuário, como alterar cores, tamanhos ou adicionar animações, aprimorando assim a experiência do usuário.

selector:hover {
  /* Propriedades CSS */
}

Por exemplo, para alterar a cor de um elemento <button> quando o ponteiro do mouse passa sobre ele, você pode usar o seguinte CSS:

Agora que sabemos como usar :hover, podemos adicionar o seguinte a style.css:

.navigation li:hover::after {
  width: 100%;
}

Até este ponto, o efeito de sublinhado nos itens de navegação foi alcançado ao passar o mouse. No entanto, estudantes atentos podem perceber que o efeito de surgimento da linha deslizando para baixo é mais suave, o que nos leva a apresentar outro atributo CSS.

Transição

As transições CSS permitem adicionar um efeito ao mudar de um estilo para outro, sem usar animações Flash ou JavaScript. Você pode especificar a duração da transição, bem como a maneira como a transição ocorre por meio de funções de temporização.

A propriedade transition do CSS é uma abreviação para quatro propriedades relacionadas à transição:

• transition-property: Especifica o nome da propriedade CSS para a qual o efeito de transição se aplica.
• transition-duration: Define a duração da transição.
• transition-timing-function: Descreve como a transição prosseguirá durante sua duração.
• transition-delay: Especifica um atraso antes do início da transição.

Por exemplo, o seguinte código CSS define um efeito de transição que altera a cor de fundo de um elemento de aqua para rgb(145, 255, 0) ao longo de 1 segundo:

Agora que sabemos como usar transition, podemos adicionar o seguinte a style.css:

.navigation li::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: black;
  transition: width 0.3s ease;
}

Opacidade

Quando você move o mouse sobre a imagem na Área de Exibição, a imagem aumentará em transparência e o texto aparecerá abaixo dela.

A propriedade opacity do CSS é usada para definir o nível de opacidade de um elemento. Com esta propriedade, você pode controlar a transparência de um elemento e seus filhos, tornando o elemento totalmente transparente, totalmente opaco ou qualquer nível de opacidade intermediário. Os valores de opacidade variam de 0 (completamente transparente) a 1 (completamente opaco). Esta propriedade é muito útil para criar efeitos de desvanecimento, enfatizar elementos interativos ou projetar interfaces com uma sensação de profundidade.

selector {
  opacity: value; /* Os valores variam de 0 (completamente transparente) a 1 (completamente opaco) */
}

Agora que sabemos como usar opacity, podemos adicionar o seguinte a style.css:

.service figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  opacity: 0;
}
.service figure:hover img {
  opacity: 0.5;
}
.service figure:hover figcaption {
  opacity: 1;
}

O efeito de aumento da transparência é alcançado. Em seguida, adicionamos um pouco de suavização à interação.

Transformação

A propriedade transform do CSS permite que você gire, dimensione, distorça (skew) ou transponha (translate) um elemento, alterando assim a forma e a posição do elemento sem afetar o layout da página. Esta é uma ferramenta poderosa para criar efeitos visuais dinâmicos e animações complexas.

A propriedade transform inclui as seguintes funções:

• rotate(): Rotaciona um elemento, com o parâmetro sendo o ângulo de rotação (por exemplo, rotate(45deg) para uma rotação de 45 graus).
• scale(): Dimensiona um elemento, com o parâmetro sendo o fator de escala (por exemplo, scale(2) para dobrar o tamanho).
• translate(): Transpõe um elemento, com os parâmetros sendo as distâncias a serem movidas ao longo do eixo X e do eixo Y (por exemplo, translate(50px, 100px) para mover 50px para a direita e 100px para baixo).
• skew(): Distorce (skew) um elemento, com os parâmetros sendo os ângulos de distorção ao longo do eixo X e do eixo Y (por exemplo, skew(30deg, 20deg) para uma distorção de 30 graus ao longo do eixo X e uma distorção de 20 graus ao longo do eixo Y).

Por exemplo, mova o elemento <p> 100 pixels para a direita no eixo x.

Agora que sabemos como usar transform, podemos adicionar o seguinte a style.css:

.service figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}
.service figure:hover figcaption {
  opacity: 1;
  transform: translateY(0%);
}

Z-Index

A propriedade z-index do CSS controla a ordem de empilhamento vertical de elementos em uma página. Quando os elementos se sobrepõem, z-index determina qual elemento deve aparecer no topo. Ele só pode ser aplicado a elementos posicionados, ou seja, aqueles com um valor de atributo position de relative, absolute, fixed ou sticky. O valor de z-index pode ser positivo, negativo ou 0, onde valores mais altos significam que o elemento será colocado no topo de elementos com valores mais baixos.

selector {
  position: relative | absolute | fixed | sticky;
  z-index: number;
}

Por exemplo, assumindo que existem dois elementos sobrepostos, podemos usar z-index para controlar qual elemento aparece no topo:

Agora que sabemos como usar z-index, podemos adicionar o seguinte a style.css:

header {
  position: fixed;
  display: flex;
  flex-direction: row;
  background-color: rgb(233, 174, 87);
  width: 100%;
  max-height: max-content;
  min-height: 1em;
  padding-top: 1%;
  padding-bottom: 1%;
  text-transform: uppercase;
  z-index: 1;
}

Implementando Animações Keyframe

Há uma animação de fade-in na página de boas-vindas quando entramos no site.

As animações CSS são uma ferramenta poderosa que permite aos desenvolvedores criar efeitos animados para elementos de páginas da web sem usar JavaScript. Com as animações CSS, você pode definir uma sequência de animações que transicionam um elemento de um estado de estilo para outro.

As animações CSS dependem principalmente de duas partes principais: a regra @keyframes e as propriedades de animação.

• Regra @keyframes: Define os keyframes na sequência de animação. Cada keyframe descreve o estilo da animação em um momento específico.
• Propriedades animation: Aplicam o @keyframes definido a um seletor e definem a duração, o atraso, a contagem de iterações e muito mais para a animação.

Por exemplo:

Agora que sabemos como usar animação, podemos adicionar o seguinte a style.css:

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
  margin: auto;
  padding: 0 20px;
  animation: fade-in;
  animation-duration: 8s;
}
.box-feature .cover-image {
  animation: fade-in;
  animation-duration: 5s;
}

Resumo

Neste laboratório, Taylor aplicou com sucesso animações e transições CSS ao site "Pet's House", criando uma experiência de usuário animada e interativa. A jornada de páginas estáticas para interações dinâmicas demonstra o poder de dicas visuais sutis na melhoria da navegação e do engajamento do site. Por meio de animações e transições, Taylor tornou o espaço digital de "Pet's House" mais convidativo e memorável para cada visitante.