Como utilizar CSS para criar animações

Olá Dev’s! Hoje explico nesse post como criar animações utilizando o a linguagem de estilização CSS

---

#Primeiros passos

---

#Definindo o “@keyframes”

@keyframes nome_da_animacao{

}

Ao empregar o @keyframes, é necessário passar um parâmetro que determinará o nome da animação, permitindo que seja referenciada posteriormente em nosso código CSS. Essa flexibilidade é extremamente valiosa, pois nos possibilita reutilizar a mesma animação em diversos elementos de um projeto, simplificando significativamente o processo de criação.

#Configurando inicio e fim

@keyframes nome_da_animacao{
    from{
        propriedade: valor;
    }to{
        propriedade: valor;
    }
}

No "@keyframes", temos a flexibilidade de definir não apenas o início e o fim da animação, mas também os estágios intermediários que compõem o efeito desejado. Isso nos permite ter um controle preciso sobre como a animação será exibida ao longo do tempo

Porcentagem

@keyframes nome_da_animacao{
    0%{
        propriedade: valor;
    }100%{
        propriedade: valor;
    }
}

Ao utilizar porcentagens para definir o início e o fim da animação, você tem controle sobre como a animação será progressiva. Isso significa que você pode alterar os valores das propriedades a cada 1% da animação, possibilitando criar animações mais elaboradas e detalhadas.

From e to

@keyframes nome_da_animacao{
    from{
        propriedade: valor;
    }to{
        propriedade: valor;
    }
}

Ao utilizar "from", você está especificando o estilo que o elemento terá no início da animação, ou seja, no momento em que a animação começa. Por exemplo, se você deseja que um elemento comece com uma opacidade de 0 (totalmente transparente) no início da animação, você pode definir from { opacity: 0; }.

Por outro lado, ao utilizar "to", você está especificando o estilo que o elemento terá no final da animação, ou seja, no momento em que a animação termina. Por exemplo, se você deseja que um elemento tenha uma opacidade de 1 (totalmente visível) no final da animação, você pode definir to { opacity: 1; }.

Somente o “to”

@keyframes nome_da_animacao{
    to{
        propriedade: valor;
    }
}

Se você utilizar somente o “to”, o próprio css definirá o inicio da animação( o “from”) como o estado atual do elemento que está e o final da animação será justamente o que você colocar dentro de “to”, vamos supor que que na animação iremos aumentar a escala do nosso elemento, por padrão os elementos tem a escala 1(tamanho real desse elemento), mas se você definir
to{ scale: 2 } será criada uma animação onde o inicio será a scale: 1 que é o tamanho real do elemento, ou sejam, o tamanho padrão e o final será o dobro dessa escala, já que passamos scale: 2

---

#Aplicando animação em um elemento

.classe_do_elemento{
    animation: nome_da_animacao duração atraso iteração direção preenchimento;
}

Vamos explicar cada um desses valores:

• nome_da_animacao: Especifica o nome da animação definida usando a regra @keyframes. Por exemplo, se você definiu uma animação chamada "slide-horizontal", você pode usar animation: slide-horizontal; para aplicá-la.

---

• duração: Define o tempo que a animação levará para ser concluída. Pode ser especificada em segundos (s), milissegundos (ms) ou como um valor em porcentagem em relação à animação pai.

---

• atraso: Opcionalmente, você pode definir um atraso antes que a animação comece. Isso é útil para sincronizar várias animações ou para adicionar um tempo de espera antes que a animação seja iniciada. O atraso também pode ser especificado em segundos (s), milissegundos (ms) ou como um valor em porcentagem em relação à duração da animação.

---

• iteração: Define o número de vezes que a animação será repetida. Você pode usar um valor inteiro, como 3, para indicar um número específico de iterações, ou usar infinite para repetir a animação indefinidamente.

---

• direção: Especifica a direção da animação. Pode ser normal (para frente), reverse (reverso), alternate (ida e volta) ou alternate-reverse (ida e volta reverso). A direção "ida e volta" reproduz a animação no sentido inverso após cada iteração.

---

• preenchimento: Define como o elemento será estilizado antes e depois da animação. Por padrão, o elemento assume seu estilo inicial antes da animação começar e mantém seu estilo final após a conclusão. O valor forwards faz com que o elemento mantenha o estilo final após a animação, e backwards faz com que o elemento adote o estilo inicial antes do início da animação.

---

Post criado e publicado com 💙 por Luís Daví
👾Portifólio 🚀Github 📸Instagram