As animações em CSS permitem que você crie efeitos de transição e movimento em elementos HTML em uma página da web.
Com animações CSS, você pode controlar a duração, o atraso, o tipo de animação e outras propriedades. Neste capítulo, veremos como criar animações em CSS.
Criando animações em CSS
Para criar uma animação em CSS, você precisa definir os seguintes elementos:
- A regra
@keyframes, que define a animação em si. - A propriedade
animation-name, que aponta para a regra@keyframes. - A propriedade
animation-duration, que define a duração da animação em segundos ou milissegundos. - A propriedade
animation-timing-function, que define o tipo de animação, como linear, ease-in, ease-out, ease-in-out, etc. - A propriedade
animation-delay, que define o tempo de espera antes que a animação comece. - A propriedade
animation-iteration-count, que define o número de vezes que a animação é executada. - A propriedade
animation-direction, que define a direção da animação, como para frente, para trás, alternada, etc. - A propriedade
animation-fill-mode, que define como o elemento deve ser estilizado antes e depois da animação.
Aqui está um exemplo de uma animação simples de rotação:
<!DOCTYPE html><html><head> <style> @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .box { width: 100px; height: 100px; background-color: red; animation-name: rotate; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; } </style></head><body> <div class="box"></div></body></html>Neste exemplo, a animação começa com o elemento girando de 0 graus para 360 graus, e continua a girar infinitamente. A propriedade animation-name aponta para a regra @keyframes que define a animação em si.
A propriedade animation-duration define a duração da animação em 2 segundos. A propriedade animation-timing-function define a animação como linear, o que significa que a animação progride uniformemente ao longo do tempo.
A propriedade animation-iteration-count define que a animação é executada infinitamente.
Adicionando efeitos de transição
Além das animações de rotação e movimento, você também pode usar animações CSS para criar efeitos de transição entre diferentes estados de um elemento. Aqui está um exemplo:
<!DOCTYPE html><html><head> <style> .box { width: 100px; height: 100px; background-color: red; transition: background-color 1s ease-in-out; } .box:hover { background-color: blue; } </style></head><body> <div class="box"></div></body></html>Neste exemplo, a transição ocorre quando o mouse é colocado sobre a caixa. A propriedade transition define a transição que ocorre quando a cor de fundo da caixa muda de vermelho para azul.
A transição leva 1 segundo para ser concluída e usa uma função de temporização ease-in-out, o que significa que a transição começa lentamente, acelera no meio e depois diminui novamente.
Usando animações CSS com jQuery
Você também pode usar a biblioteca jQuery para criar animações em CSS. O jQuery fornece um conjunto de funções que permitem que você crie animações complexas em elementos HTML.
Para começar, você precisa incluir o jQuery em sua página da web. Você pode fazer isso adicionando o seguinte código ao cabeçalho do seu documento HTML:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>Agora você pode usar as funções do jQuery para criar animações. Aqui está um exemplo de como você pode animar uma caixa usando jQuery:
<!DOCTYPE html><html><head> <style> .box { width: 100px; height: 100px; background-color: red; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script> <script> $(document).ready(function() { $(".box").click(function() { $(this).animate({ width: "200px", height: "200px", backgroundColor: "blue" }, { duration: 1000, color: "toggle" }); }); }); </script></head><body> <div class="box"></div></body></html>Visualização
Neste exemplo, a caixa começa com uma largura e altura de 100 pixels e uma cor de fundo vermelha. Quando a caixa é clicada, o código jQuery anima a largura e altura para 200 pixels e a cor de fundo para azul em 1 segundo.
Conclusão
As animações em CSS são uma ótima maneira de adicionar movimento e interatividade às suas páginas da web. Você pode usar as animações CSS para criar efeitos de transição simples ou animações mais complexas.
Com o uso do jQuery, você pode criar animações ainda mais complexas e controladas. Combinado com outras técnicas de design da web, como HTML e JavaScript, as animações em CSS podem ajudar a criar uma experiência de usuário única e envolvente em suas páginas da web.