Como criar animações de quadro-chave CSS
O CSS oferece aos desenvolvedores a capacidade de dar vida às suas páginas da web usando animação de quadros-chave.
A animação CSS é obtida alterando o estado inicial de um elemento HTML por meio de suas várias propriedades. Algumas propriedades CSS gerais que podem ser animadas incluem:
- Largura
- Altura
- Posição
- Cor
- Opacidade
Essas propriedades CSS gerais são manipuladas por elementos CSS específicos para criar o resultado desejado. Se você já se deparou com um elemento animado em uma página da web, é provável que o elemento tenha sido animado usando animação de quadros-chave.
O que é um elemento de quadros-chave?
O elemento keyframes pode ser usado em um ou mais elementos HTML aos quais ele tem acesso. Ele identifica um ponto específico no estado de um elemento e dita a aparência que esse elemento deve ter nesse momento.
Isso pode parecer muito para digerir, mas na verdade é muito simples. O elemento keyframes tem uma estrutura bastante simples que pode ser facilmente compreendida e ajustada para se adequar a quaisquer requisitos de animação.
Exemplo de estrutura de quadros-chave
@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}Digamos que você queira animar um botão retangular verde transformando-o em um botão redondo azul.
Dentro dos parâmetros da da seção acima, você precisa colocar todo o necessário styling ter o elemento parecendo uma tecla rectangular verde, em seguida, na a seção, você vai colocar todos os requisitos de estilo para transformar este botão em um botão azul rodada .
Se você está pensando, “isso não parece muito com animação”. Bem, isso é porque um componente-chave de todo esse processo ainda não foi introduzido – esse componente é a propriedade de animação.
A propriedade de animação
A propriedade de animação possui um conjunto de diferentes subpropriedades; eles são usados em combinação com a estrutura de quadros-chave acima para animar o elemento HTML desejado.
No entanto, você só precisa conhecer cinco dessas subpropriedades e os valores que estão associados a elas para obter animação em seus projetos. Essas propriedades são conhecidas como:
- Nome da animação
- Duração da animação
- Função de tempo de animação
- Atraso de animação
- Contagem de iteração de animação
Usando animação em uma página da web
Usando o cenário acima, o objetivo é criar um botão animado.
Exemplo de animação de botão
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation</title>
<style>
/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}
</style>
</head>
<body>
<!-- placing the button element with the text "Click!" on the web page -->
<button class="btn">Click!</button>
</body>
</html>
A seção de animação do código acima contém as cinco subpropriedades mencionadas anteriormente. Cada propriedade tem uma função muito distinta e, juntas, funcionam para animar qualquer elemento HTML para o qual foram feitas.
A propriedade Animation-name
Esta propriedade é a única propriedade mais importante da lista. Sem a propriedade animation-name , você não teria nenhum identificador para colar no elemento keyframes , tornando inútil todo o código dentro de seus parâmetros.
Se você se esqueceu de incluir uma ou duas das outras subpropriedades, ainda pode ter uma animação bastante decente. No entanto, se você esquecer a propriedade nome da animação, não terá animação.
A propriedade de duração da animação
Esta propriedade é usada para definir a quantidade de tempo que um elemento animado deve levar ao fazer a transição de um estado para o próximo.
No exemplo acima, a propriedade animation-duration é definida para 5 segundos (5s), então o botão retangular verde terá um total de 5 segundos antes de se tornar totalmente um botão redondo azul.
A propriedade Animation-delay
Essa propriedade é importante por um motivo; algumas páginas da web podem demorar alguns segundos para carregar completamente (devido a vários fatores diferentes). Portanto, a propriedade animation-delay evita que a animação comece imediatamente, caso a página da web demore algum tempo para carregar.
No exemplo acima, a propriedade animation-delay é definida como 4s, o que significa que a animação não começará até 4 segundos após a página da web ser visitada (dando à página da web tempo suficiente para carregar antes que a animação comece).
A propriedade Animation-iteration-count
Esta propriedade indica quantas vezes o elemento animado deve mudar de um estado para o próximo. A propriedade animation-iteration-count assume valores que são palavras e números. O valor do número pode ser qualquer coisa de 1 para cima, enquanto o valor da palavra geralmente é “ infinito ”.
No exemplo acima, o valor de animação-iteração-contagem é definido como “ infinito ”, o que significa que, enquanto a página da web estiver ativa, a propriedade do botão será animada de um estado para o próximo, continuamente.
A propriedade Animation-timing-function
Esta propriedade determina o movimento do elemento animado conforme ele faz a transição de um estado para o próximo. A propriedade animation-timing-function geralmente é atribuída a um dos três valores de atenuação.
- Fácil
- Facilidade para fora
- Fácil de entrar
O valor de atenuação é usado acima; isso faz a transição lenta da animação de um estado para o outro. Se o objetivo é criar uma transição lenta quando o botão está se transformando de um retângulo verde em um círculo azul, você deve usar o valor de atenuação . Se você quisesse apenas a transição lenta na direção oposta, usaria o valor de atenuação .
Reduzindo Nosso Código
Na maioria dos casos, reduzir a duração de um programa é visto como uma abordagem prática. Isso ocorre principalmente porque menos linhas de código reduzem a probabilidade de erros passarem despercebidos em seus programas.
O código acima pode ser reduzido em quatro linhas. Isso pode ser alcançado simplesmente usando a propriedade animation sem identificar explicitamente cada uma de suas subpropriedades.
Reduzindo o código para o exemplo de animação de botão
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation</title>
<style>
/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}
</style>
</head>
<body>
<!-- placing the button element with the text "Click!" on the web page --
<button class="btn">Click!</button>
</body>
</html>
No código acima, uma linha de código é usada para alcançar o mesmo resultado que anteriormente ocupava cinco linhas de código — é assim que você produz um código mais limpo .
Agora você pode animar suas páginas da web
Agora você tem as habilidades necessárias para animar qualquer elemento HTML em uma página da web. Você também deve ter uma compreensão de como a propriedade de animação e o elemento keyframes trabalham juntos para tornar a animação CSS possível.
A propriedade de animação com sua lista de extensas subpropriedades é sem dúvida interessante. Ainda assim, há um amplo espectro de outras propriedades CSS que podem ser úteis.
Crédito da imagem: Josh Riemer / Unsplash
