O CSS de forma geral, estiliza um site o deixando mais bonito, formata e dá brilho no site como formatação de texto, linhas, bordas, cores, sombras e muitas outras funções, porém vamos tratar nesse post sobre animações em CSS3.
As versões do CSS mostram que com o tempo os códigos precisaram ser atualizados para suprir a necessidade tecnológica dos navegadores para melhor as páginas na web. Foi o caso do CSS1, CSS2 e agora atualmente o CSS3.
O CSS3 tem uma particularidade, as suas animações que são mais simples de fazer do que programação em JavaScritp, as animações são feitas pelo elemento que deseja ser alterado da página e precisam ficar com a propriedade animation ou as sub-propriedades, que são elas:
- animation-delay
Configura o delay entre o tempo em que o elemento é carregado e o início da sequência de animação.
- animation-direction
Configura se a animação deve ou nao alternar a direção em cada execução durante a sequência ou voltar ao ponto inicial e se repetir.
- animation-duration
Configura o tempo que uma animação deveria levar para complear um ciclo.
- animation-iteration-count
Configura o número de vezes que uma animação deveria se repetir; você pode especificar infinito para repetir a animação indefinidamente.
- animation-name
Especifica o nome da regra com parênteses (at-rule) @keyframes at-rule descrevendo os keyframes da animação.
- animation-play-state
Permite voce pausar e resumir a sequência da animação.
- animation-timing-function
Configura a sincronização da animação; que é, como a animação transita por keyframes, por estabilizar curvas de aceleração.
- animation-fill-mode
Configura que valores são aplicados pela animação antes e depois de se executar.
Para alterar a sequência da animação usamos o @keyframe para dar a aparência da animação, usando entre parênteses a (at-rule) @keyframe. Cada @keyframe irá definir o tempo da animação e a renderização que será executada.
Exemplo 1:
/* O código da animação */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* O elemento onde será aplicada a animação */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Também é possível usar porcentagem onde 0% indica início da animação e 100% indica final da animação.
Exemplor 2:
/* O código da animação */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* O elemento onde será aplicada a animação */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Para executar a animação em ordem inversa usamos o exemplo abaixo em um elemento da página, nesse caso uma DIV.
Exemplo 3:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: reverse;
}
Para especificar as curvas de animação utilizamos a propriedade animation-timing-function onde altera e edita a velocidade da curva da animação:
- ease – especifica uma animação com um início lento, em seguida, rápido e, em seguida, terminar lentamente (este é o padrão).
- linear – especifica uma animação com a mesma velocidade do início ao fim.
- ease-in – especifica uma animação com início lento.
- ease-out – especifica uma animação com um final lento.
- ease-in-out – especifica uma animação com um início e fim lentos.
- cubic-bezier(n,n,n,n) – permite que você defina seus próprios valores em uma função cúbico-bezier.
Exemplo 4:
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Fonte:
https://www.w3schools.com/css/css3_animations.asp
https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Animations/Usando_anima%C3%A7%C3%B5es_CSS
Esse foi mais um post do Blog do Curso de Informática Microcamp.
Faça um curso completo na melhor escola do Brasil >> microcamp.com.br
