Entendendo Keyframes
Os “keyframes” são pontos-chave em animações CSS. São frames que definem estados específicos, indicando o início, meio e fim da animação.
Imagine um slideshow: o primeiro keyframe exibe a imagem inicial, o último, a imagem final. Os intermediários definem as transições suaves entre esses estados.
Em códigos, é simples. Considere o seguinte exemplo:
@keyframes slide {
0% { opacity: 0; transform: translateX(-100%); }
50% { opacity: 0.5; transform: translateX(0); }
100% { opacity: 1; transform: translateX(100%); }
}
.slide-container {
animation: slide 3s infinite;
}
Aqui, @keyframes slide define a animação. No início (0%), a opacidade é 0, e o elemento está fora da tela. No meio (50%), a opacidade é 0.5, e o elemento desliza para a tela.
No final (100%), a opacidade é 1, e o elemento está fora da tela novamente. animation: slide 3s infinite; aplica a animação ao elemento com a classe slide-container, levando 3 segundos para completar e repetindo infinitamente.
Keyframes são como instruções para contar a história da sua animação, moldando a experiência visual de forma simples e poderosa.
