Home-theater-designers
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:
o Windows não conseguiu detectar automaticamente as configurações de proxy desta rede. Windows 10
- 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 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 atender a quaisquer requisitos de animação.
Exemplo de estrutura de keyframes
@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 do a partir de seção acima, você precisará colocar todo o estilo necessário para que o elemento pareça um botão retangular verde e, em seguida, no para seção, você colocará todos os requisitos de estilo para transformar este botão em um botão redondo azul.
Se você está pensando, isso não parece muito com animação. Bem, isso é porque um componente-chave de todo esse processo ainda está para ser introduzido --- este componente é a propriedade de animação.
A propriedade de animação
o propriedade de animação tem 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
Animation
/* 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;
}
}
Click!
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.
Relacionado: Como direcionar parte de uma página da web usando seletores CSS
A propriedade Animation-name
Esta propriedade é a mais importante da lista. Sem o propriedade de nome de animação , 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ê esqueceu o propriedade de nome de animação você não teria 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, o propriedade de duração de animação é definido como 5 segundos (5s), portanto, 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). Então o propriedade de animação-atraso evita que a animação seja iniciada imediatamente, caso a página da web demore algum tempo para carregar.
No exemplo acima, o propriedade de animação-atraso é definido 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 fazer a transição de um estado para o próximo. o 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 contagem de iteração de animação está configurado para 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 outro, 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. o propriedade da função de tempo de animação geralmente é atribuído um dos três valores de atenuação.
- Fácil
- Facilidade para fora
- Fácil de entrar
o valor de facilidade de entrada é 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ê usaria o valor facilitado . Se você quisesse apenas a transição lenta na direção oposta, você usaria o valor de alívio .
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
Animation
/* 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;
}
}