CSS Além do Básico: Como Utilizar Keyframes para Animações Personalizadas

Introdução

Como desafio de projeto "Criando Artigos Técnicos com ChatGPT e Lexica.art" (com uma adequação técnica utilizando bing e microsoft designer), segue um artigo para explicar sobre animações com CSS, bem como alguns links úteis para utilizar essa ferramenta de estilização.

HTML & CSS

HTML e CSS são como o duo dinâmico da construção de páginas web. O HTML, ou HyperText Markup Language, é a estrutura básica, o esqueleto da página. É como se fosse a fundação da casa, definindo os elementos e o conteúdo. Já o CSS, ou Cascading Style Sheets, é o estilista da página, dando vida e cor ao HTML. Ele cuida do visual, das cores, do layout, ou seja, é o que faz a casa ficar bonita por fora.

Tags, Classes e IDs

Quando se fala de HTML, é fundamental entender três conceitos: tags, classes e IDs. As tags são como instruções para o navegador, como <p> para parágrafos ou <h1> para títulos. As classes são como rótulos que você pode dar a certos elementos do HTML para estilizá-los de forma similar, e os IDs são identificadores únicos para um elemento específico.

<p>Isso é um parágrafo em HTML.</p>
<div class="destaque">Isso é um destaque usando uma classe em HTML.</div>
<h1 id="titulo">Isso é um título identificado por um ID em HTML.</h1>

Seletores CSS

Os seletores CSS são a forma como você direciona as regras de estilo para os elementos HTML. É como dizer "Hey, quero mudar a cor de todos os parágrafos" ou "Vamos dar um espaçamento maior para todos os elementos com a classe 'destaque'". Os seletores podem ser por tag (como p {}), por classe (como .destaque {}) ou por ID (como #titulo {}).

p {
 color: blue;
}

.destaque {
 background-color: yellow;
}

#titulo {
 font-size: 24px;
}

@Keyframes

Os @keyframes são como o roteiro de uma animação em CSS. Eles permitem criar sequências de animação, especificando como um elemento deve se comportar em diferentes estágios da animação. Para utilizá-los, você define os estágios-chave da animação e descreve as mudanças de estilo que devem ocorrer em cada estágio.

Sintaxe

A sintaxe básica dos @keyframes começa com o identificador da animação seguido por chaves {} onde se define os diferentes estágios da animação, como from {} (para o início) e to {} (para o final), ou em percentagens como 50% {}. Vale ressaltar que algumas propriedades não são animadas por @keyframes, necessitando da utilização do JavaScript.

@keyframes moveAround {
from {
  transform: translateX(0);
}
to {
  transform: translateX(100px);
}
}

Animation

A propriedade animation é como o controlador da sua animação em CSS, é onde você reúne todas as informações importantes para definir como sua animação vai acontecer. Para usá-la, você pode vincular os @keyframes de acordo com a sintaxe a seguir.

Sintaxe

A sintaxe da propriedade animation inclui várias partes essenciais:

1. animation-name: Aqui você especifica o nome dos @keyframes que deseja usar para a animação.
2. duration: É a duração da animação, expressa em segundos ou milissegundos.
3. timing-function: Define a aceleração ou desaceleração da animação ao longo do tempo, como linear, ease-in, ease-out, entre outros.
4. delay: É o tempo que a animação aguarda antes de começar, também em segundos ou milissegundos.
5. iteration-count: Indica quantas vezes a animação deve ser reproduzida, podendo ser um número específico ou infinite para repetição infinita.
6. direction: Determina se a animação deve ser executada normalmente (normal), reversa (reverse), ou em ciclos alternados (alternate).
7. fill-mode: Especifica como os estilos aplicados no final da animação devem ser mantidos, como forwards para manter o estado final ou backwards para manter o estado inicial.

.elemento {

 animation: moveAround 3s ease-in-out 1s infinite alternate forwards;

}

Esse código define uma animação chamada moveAround que dura 3 segundos, utiliza uma função de temporização de aceleração e desaceleração, inicia após 1 segundo, repete indefinidamente em direções alternadas e mantém o estilo final aplicado após a animação.

Links Úteis

Apesar deste artigo não tratar da propriedade transition para evitar ser extensivo, vale a pena também citar links para sobre esse assunto para complementar as animações de elementos html.

• CSS Trick: Keyframe Animation Syntax | CSS-Tricks - CSS-Tricks, animation | CSS-Tricks - CSS-Tricks, transition | CSS-Tricks - CSS-Tricks
• MDN: animation - CSS | MDN (mozilla.org), transition - CSS | MDN (mozilla.org)
• Animista: Animista - On-Demand CSS Animations Library
• Keyframes.app: Keyframes.app

Conclusão

Em resumo, dominar as técnicas de animação em CSS com keyframes e transições, abre possibilidades para tornar suas páginas web mais dinâmicas e atraentes. Combinando habilidades em HTML, CSS e uma compreensão sólida desses recursos, você pode criar experiências interativas incríveis para os usuários.

Para entender melhor a utilização das ferramentas de Inteligência Artificial para a criação deste artigo, veja a documentação em: Err0rGCeni/DIOProject_ArtigoChatGPT: Criando Artigos Técnicos com ChatGPT e Lexica.art (github.com).