Animação (@keyframes) com HTML CSS e JavaScript
As animações na web deixaram de ser apenas elementos decorativos para se tornarem ferramentas fundamentais na criação de experiências interativas e atraentes. No desenvolvimento front-end, os recursos de animação oferecidos pelo CSS, em especial por meio da regra @keyframes, permitem criar movimentos suaves, transições visuais envolventes e uma melhor comunicação visual com os usuários. Quando aliadas ao HTML e JavaScript, essas animações podem ganhar ainda mais dinamismo e controle, tornando-se elementos essenciais em mini projetos e protótipos interativos.
A diretiva @keyframes do CSS define os estados intermediários de uma animação, permitindo que o desenvolvedor controle como um elemento deve se comportar ao longo do tempo. Por exemplo, é possível animar a posição, a cor, a opacidade, a escala e muitos outros estilos CSS, desde que sejam propriedades animáveis. Com ela, é possível construir efeitos como fade-in, fade-out, deslizar elementos, criar loaders personalizados, animações de entrada em páginas e até microinterações — pequenas animações que respondem a ações do usuário, como cliques e passagens do mouse.
Do ponto de vista conceitual, a @keyframes representa uma evolução em relação às animações manuais feitas exclusivamente com JavaScript. Embora o JavaScript ainda seja indispensável para casos que requerem lógica condicional ou interações complexas, o CSS com @keyframes oferece melhor desempenho para animações simples e médias, pois é processado diretamente pelo navegador de forma mais eficiente. Além disso, a sintaxe clara e a integração direta com classes CSS facilitam a manutenção e o reaproveitamento do código.
Incorporar animações com @keyframes em mini projetos é altamente recomendável. Além de enriquecer a apresentação visual, essas animações ajudam a reforçar a identidade da interface, a guiar o olhar do usuário e a proporcionar um feedback visual imediato. Por exemplo, em um formulário de login, uma animação sutil no botão ao ser clicado pode indicar ao usuário que sua ação foi registrada, enquanto uma transição suave entre telas pode evitar que a navegação pareça abrupta.
Em mini projetos educacionais, o uso de @keyframes também tem um papel importante na fixação de conceitos fundamentais de tempo, estados e ciclos de execução. O desenvolvedor iniciante aprende a pensar de maneira mais visual e dinâmica, compreendendo como pequenas mudanças de estilo ao longo do tempo podem gerar grandes impactos na experiência do usuário.
Além disso, as animações contribuem para o engajamento. Em protótipos de sites, jogos simples ou páginas promocionais, o uso adequado de animações pode tornar a aplicação mais moderna e profissional, mesmo que a lógica por trás seja simples. Isso eleva o valor do projeto e pode atrair mais atenção de usuários, avaliadores ou potenciais clientes.
Portanto, dominar e aplicar @keyframes em projetos, mesmo que pequenos, é uma prática essencial para qualquer desenvolvedor front-end. A combinação de HTML para estrutura, CSS para estilo e animação, e JavaScript para controle, forma a base de interfaces ricas e funcionais. E o melhor: com desempenho, simplicidade e um toque de criatividade.
HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imagens com Hover Animado</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="imagens">
<img src="img/img1.jpg" alt="img1">
<img src="img/img2.jpg" alt="img2">
<img src="img/img3.jpg" alt="img3">
<img src="img/img4.jpg" alt="img4">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
body{
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: url('img/img5.jpg') no-repeat center center fixed;
background-size: cover;
}
.container{
background-position: center;
background-repeat: no-repeat;
position: relative;
width: 570px;
padding: 20px;
border-radius: 20px;
backdrop-filter: blur(15px);
border: 4px solid rgba(73,72,73,0.7);
overflow: hidden;
text-align: center;
}
.imagens{
display: flex;
gap: 10px;
}
.imagens img{
width: 80px;
height: 300px;
object-fit: cover;
border-radius: 6px;
cursor: pointer;
transition: width 0.4s ease;
}
.expandir{
animation: expandir 0.4s forwards;
}
.diminuir{
animation: diminuir 0.4s forwards;
}
@keyframes expandir{
from{ width:80px; }
to { width: 300px;}
}
@keyframes diminuir{
from{ width:300px; }
to { width: 80px;}
}
JavaScript
const imgs = document.querySelectorAll('.imagens img');
imgs.forEach(img => {
img.addEventListener('mouseenter', ()=>{
img.classList.remove('diminuir');
img.classList.add('expandir');
});
img.addEventListener('mouseleave', ()=>{
img.classList.remove('expandir');
img.classList.add('diminuir');
});
});
You May Also Like
Planejando os estudos
Como Usar JavaScript para Pegar Dados de um Arquivo JSON
