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.