Animações Complexas e Interativas
Neste tópico, mergulharemos em animações avançadas, tornando-as interativas e visualmente envolventes. Utilizando keyframes, crie movimentos complexos e dinâmicos com facilidade.
Começaremos aplicando transformações simples. Por exemplo, ao usar a propriedade scale, podemos ampliar suavemente um elemento ao longo do tempo:
@keyframes escala {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
.elemento {
animation: escala 3s infinite;
}
Em seguida, exploraremos a combinação de múltiplos keyframes para criar transições complexas.
Vamos suavizar a mudança de cores de um elemento:
@keyframes mudanca-cor {
0% { background-color: #ff0000; }
50% { background-color: #00ff00; }
100% { background-color: #ff0000; }
}
.elemento {
animation: mudanca-cor 4s infinite;
}
Além disso, abordaremos a interatividade com eventos do mouse. Ao utilizar JavaScript em conjunto com CSS, podemos acionar animações em resposta a ações do usuário, como passar o mouse sobre um elemento.
<div id="elemento-interativo"></div>
<script>
var elemento = document.getElementById('elemento-interativo');
elemento.addEventListener('mouseover', function() {
this.style.animation = 'mudanca-cor 2s infinite';
});
elemento.addEventListener('mouseout', function() {
this.style.animation = 'none';
});
</script>
Ao final deste módulo, você estará capacitado para criar animações avançadas, interativas e impressionantes, elevando a qualidade visual de suas páginas web.
