Dando Vida à Web: O Guia Completo de Animações com @keyframes

 Olá, equipa! Chegámos a uma das aulas mais divertidas e criativas de toda a nossa maratona. Se as Transições são sobre suavizar mudanças, as Animações são sobre criar movimento do zero!

Querem fazer um título deslizar para a página? Um ícone pulsar suavemente? Uma notificação aparecer com elegância? Tudo isso é feito com Animações CSS, e a base de tudo é uma regra especial chamada @keyframes.

Hoje, vamos aprender a criar as nossas próprias animações, fazendo elementos moverem-se, pulsarem e aparecerem com estilo na nossa página.

A Dupla Dinâmica: @keyframes e a propriedade animation

Criar uma animação em CSS é um processo de duas partes:

1. Definir a Animação com @keyframes: Primeiro, criamos uma "receita" para a nossa animação. Damos-lhe um nome e definimos os "passos" ou "momentos-chave" (keyframes) do movimento. Podemos usar from (o estado inicial) e to (o estado final), ou usar percentagens (0%, 50%, 100%) para um controlo mais fino.

2. Aplicar a Animação com animation: Depois de criar a receita, usamos a propriedade animation num seletor de CSS para "aplicar" essa animação a um elemento. É aqui que dizemos quanto tempo a animação deve durar, quantas vezes se deve repetir, etc.

Mão na Massa: Um Título que Desliza e Aparece

Vamos animar o nosso <h1> para que ele apareça a deslizar da esquerda. Adicionem este código ao vosso estilos.css:

CSS

/* 1. Definir a receita da animação */
@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%); /* Começa 100% fora do ecrã, à esquerda */
        opacity: 0; /* Começa totalmente transparente */
    }
    to {
        transform: translateX(0); /* Termina na sua posição normal */
        opacity: 1; /* Termina totalmente visível */
    }
}

/* 2. Aplicar a animação ao nosso h1 */
h1 {
    /* ... outras propriedades como color, font-family ... */
    animation-name: slideInFromLeft; /* O nome da nossa receita */
    animation-duration: 1s; /* A animação dura 1 segundo */
    animation-timing-function: ease-out; /* Começa rápido e desacelera no fim */
}

Guardem o ficheiro e atualizem a página. Vão ver o vosso título a deslizar elegantemente para a sua posição!

Exemplo 2: Um Ícone ou Botão Pulsante

Vamos criar um efeito que chama a atenção, ótimo para um botão de "Compre Agora" ou um ícone de notificação.

CSS

/* 1. Definir a receita da animação */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    }
    50% {
        transform: scale(1.05); /* Aumenta ligeiramente de tamanho */
        box-shadow: 0 0 15px rgba(0, 123, 255, 0.8); /* O brilho aumenta */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    }
}

/* 2. Aplicar a animação a um botão (por exemplo) */
button.pulsante {
    /* ... outras propriedades de botão ... */
    animation-name: pulse;
    animation-duration: 2s;
    animation-iteration-count: infinite; /* Faz a animação repetir-se para sempre! */
}

Para usar, basta adicionar a classe pulsante a um botão no vosso HTML: <button type="submit" class="pulsante">Enviar</button>.

Conclusão

Isto é apenas a ponta do iceberg, mas agora vocês conhecem a mecânica por trás de quase todas as animações que veem na web! Desbloquearam um novo nível de criatividade.

Lembrem-se da dupla: com @keyframes definimos os passos da animação, e com a propriedade animation aplicamo-la a um elemento, controlando a sua duração, repetição e muito mais.

O nosso site agora está bonito, interativo e até animado! Mas como é que ele se parece num telemóvel? Na próxima aula, vamos abordar o tópico talvez mais importante do desenvolvimento web moderno: o Design Responsivo. Vamos aprender a fazer o nosso site ficar perfeito em qualquer tamanho de ecrã.