Há muitas maneiras de se fazer isso. Mas para esse tutorial iremos mostrar como usar css3  e html5 para a animação de uma bola quicando. Vem comigo!

Nesse tutorial vamos partir do pressuposto que você sabe o básico de html e css (linkar arquivos de html com css eas tags básicas); 

Farei a animação na imagem da nossa logomarca, mas você pode fazer numa  div   com   background colorido. 

Também não irei falar sobre algumas coisas que apliquei no css, apenas a parte dos keyframes,  que foi o que usei para criar a animação. 

Mas o que são keyframes? Os keyframes controlam uma sequência de animações que serão ajustadas por nós durante a criação. Agradeça por estamos em 2021, por quê está tudo prontinho para uso, é só declarar: 

Esse nome que declarei e marquei em vermelho é o nome da nossa animação, que nesse caso é “quica”. Agora vamos pensar juntos na lógica da nossa animação, não precisa ser nenhum gênio da matemática, não se assuste

temos dois eixos o x e y 

Quando uma bola quica ela se movimenta no eixo Y certo? 

Agora vamos para o código:

0% é o momento zero da nossa animação. Vamos usar a propriedade transform 

e usar translateY para definir o quanto a nossa bolinha vai se mover no primeiro momento da nossa animação (0%);

Eu posso detalhar mais cada movimento da nossa animação (1%, 2%, 3%, 10%, etc.. ), mas vou definir apenas o momento inicial  e final (0% e 100%). 

E 100% é o final da na animação, então nosso translateY agora move até o final da tela  (100%) mas e que width e height são esses? Nossa bolinha tem 300  x 300 de width e height e quando nossa bolinha bate no chão ela amassa, então sua altura diminui (por isso o height diminui de 300 para 250px e width aumenta de 300 para 320px), Mas como conectar essa animação ao nosso elemento? Vamos lá 

1 - Usei border-radius: 100%; para ele arredondar completamente nossa bordas;

2 - Lembra do width e height com valor de 300px que falei, aí estão;

3 - É agora que o elemento se conecta com a animação. primeiro você escreve o nome da animação exatamente como está em @keyfrrame, que nesse caso é quica vamos determinar o tempo da animação 0.4 segundos, que nesse caso coloquei .4s que é uma forma de simplificar isso e o cubic-bezier (você pode dar uma olhada na web, esse é um outro assunto). 

4 - animation-direction define para qual direção vai sua animação, mas como queremos criar o efeito de uma bola que sobe e desce, vamos usar o valor alternate

5 - Agora para deixar esse  movimento acontecendo infinitamente, vamos usar o animation-iteration-count: infinite; para que o número de iterações da sua animação seja infinito. 

Pronto sua animação está feita! E aí gostou? Que tal criar sua animação e mandar pra gente?