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.
