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.