Animações CSS são um recurso importante pois permitem animações em elementos HTML sem a necessidade de uso de JavaScript ou outra tecnologia que não o CSS3. Uma boa aplicação para esse recurso é por exemplo uma apresentação de slide de fotográfias.
Creio ser normal se assustar um pouco ao ouvir falar em animações com CSS3, confesso que eu mesmo fiquei um pouco assustado esperando algo complicado de fazer e de dominar, mas para "nossa alegria" criar animações com CSS é bem simples.
Primeiro, devemos por as propriedades que controlarão as animações no campo do elemento HTML que será animado. Colocarei abaixo um exemplo com proriedades de animação e comentarei à frente sobre cada uma delas:
div {
animation-nome: xxxx; /*Com essa propriedade damos um nome para nossa animação.*/
animation-duration: Xs; /*Aqui determinamos quanto tempo a execução da animação durará. Não a deixe de declara pois o valor inicial é 0 então se não houver declaração sua animação nunca será executada*/
animation-delay; Xs; /*Nessa propriedade estabelecemos um tempo de atraso do carregamento da pag até o início da animação.*/
animation-interation-count: X; /*Número de vezes que a animação será executada. Se desejado pode-se por o valor "infinite" o que fará a animação se repetir sem parar.*/
animation-direction: xxxxx; /*Por padrão a animação seguirá as especificações definidas no css do primeiro para o último, mas podemos utilizar essa propriedade para mudarmos essa direção padrão da execução. Podemos por exemplo usar os valores alternate (que alternará entre a ida e a volta, caso tenha-se definido que a animação ocorra mais que uma vez) e reverse (que fará com que a animação ocorra de trás para frente).*/
}
Após estabelecer as diretrizes para a animação agora é necessário que venhamos cria-la de fato, pois até aqui o que já foi feito apenas configurou a animação mas não a fez existir ainda (ao menos não de forma concreta). Para de fato criar a animação usaremos uma regra CSS a @keyframes. Vejam o exemplo a seguir:
@keyframes xxxx {
from {
/*Aqui colocamos as caracateristicas de início da animação.*/
}
to {
/*E aqui definimos as caracteristicas de encerramento*/
}
} /*Os "xxxx" do keyframe representam o nome da animação, o nome que demos a ela anteriormente*/
Vimos uma forma simples de fazer a animação com "from" e "to", dois estágios, início e fim. Poderiamos ter feito essa animação com mais estágios, para isso ao invês de utilizarmos from e to usariamos porcentagem, exemplo: (0%, 25%, 50%, 100%), desse modo a animação geraria alterações no início 0%, em 25% do tempo de animação, 50% e mudar a última vez na conclusão com 100% do tempo de animação atingido.
Vale lembrar que as animações CSS podem ser aplicados à maioria dos elementos HTML. Lembro também que há algumas outras propriedades CSS para animações que podem deixar sua animação mais interessante, para conheçe-las visite: https://www.w3schools.com/css/css3_animations.asp
