Criando animações personalizadas
No tópico “Criando Animações Personalizadas”, você irá aprender a personalizar animações usando keyframes no CSS.
Os keyframes são pontos-chave que definem o estado de um elemento em diferentes momentos da animação.
Vamos criar um exemplo simples usando um quadrado:
/* Definindo os keyframes */
@keyframes animacaoPersonalizada {
0% { transform: translateY(0); }
50% { transform: translateY(100px); }
100% { transform: translateY(0); }
}
/* Aplicando os keyframes ao elemento */
.quadrado {
animation: animacaoPersonalizada 3s infinite;
}
Neste exemplo, o quadrado se moverá para baixo, depois para cima, criando uma animação personalizada.
Os keyframes são utilizados para definir a transformação do elemento em diferentes momentos (0%, 50%, 100%).
O seletor .quadrado aplica a animação ao elemento com uma duração de 3 segundos, e o parâmetro infinite faz com que a animação se repita indefinidamente.
Compreender como criar animações personalizadas com keyframes é essencial para dar vida aos elementos em sua página web, tornando-as mais envolventes e interativas.
Este é um passo crucial para explorar o potencial criativo das animações CSS.
