DMG CAP13 2025 VA03 BOUCING BALL EM CSS

Você já praticou aquele exercício
clássico de animação Boucing Ball?

Se já, ótimo.

Agora nós vamos aprender
ele em código

utilizando os famosos
keyframes aqui no CSS.

Vamos para o VS Code
que eu vou te mostrar.

Já estou com as minhas páginas
prontas aqui.

Com a de HTML e CSS

No HTML,
eu intitulei "Boucing Ball",

que é o nome do nosso exercício
e linkei a nossa página style,

que é onde a gente vai estilizar
e criar a animação da nossa bola,

da nossa bola quicando,
aqui nesta página especificamente.

Precisa estar linkado, senão,
não reconhece.

E aqui, dentro do corpo
da minha interface,

eu criei uma área de trabalho
que eu chamei de "mycanvas"

e dentro do "mycanvas"
eu coloquei duas divs,

que é uma de "container",
onde a bola vai ficar dentro,

e o "shadow",
que é a sombra da minha bola,

que vai ficar no "container'
e, dentro do container,

temos uma div com a classe "ball"
que é a nossa bola, ok.

Ficando claro,

vamos para o mais importante
que é o CSS,

onde a gente vai fazer
a coisa acontecer.

Mas antes disso,

eu vou aqui no meu corpo
da interface do meu HTML

e eu vou colocar um padding de 0.

E vou colocar uma margem
de 0 também,

que eu quero zerar todos
os meus parâmetros do body.

E aí, vamos chamar a nossa classe
"mycanvas".

Legal, vou abrir chaves,

então vou dar um background para ele,
um background-color

para a gente visualizar onde
que está a nossa área de trabalho.

E neste background,
eu vou colocar esse azul "aqua",

pronto.

Colocamos o nosso "mycanvas".

Deixa eu ver se está certo
a nomenclatura,

"mycanvas", ok.

Perfeito.

E aí a gente vai ter que definir
a altura para ele aparecer, né?

A altura e a largura.

Então, vamos jogar os dois
de 500 pixels,

"width" 500px
e vou dar um "ctrl + S".

Eis aqui o meu espaço de trabalho
que eu denominei "mycanvas"

e vou colocar um "position: absolute",

para ele ficar absoluto
dentro do nosso "mycanvas".

E um "margin: auto",
porque eu quero que seja automático.

E vou zerar alguns parâmetros,
"left" eu zero.

"Right" eu zero.
"Top" eu zero também.

Opa, não foi?
Top, zero.

E o "bottom", que é o nossa base,
zerei.

Essa parte do nosso canvas
está legal.

E agora, vamos estilizar a nossa bola,
está faltando, né?

Já tem a classe dentro
da div "container" como ball, então,

eu vou chamar a minha classe,

vou abrir chaves e vou colocar,

deixa eu ver qual será a cor,
vamos lá,

"background-color",
alguma coisa que seja bem...

Vou pôr "brown".

Será que vai ficar
um contraste legal?

Vamos ver quando a gente colocar
o "height" em 50 pixels,

vou dar um "ctrl + S",
ele já começa a formar.

"Width" em 50 pixels.

"Ctrl + S"
e já forma mais um pouco.

E para arredondar os cantos,

eu vou jogar
um "border-radius" com 50%.

Já formou nossa bola.

Adoro quando forma nossa bola.

Já que o nosso canvas
é um "position: absolute",

vamos colocar aqui
um "position: relative"

e "top: 100" para gente definir onde
é o ponto de partida da nossa bola.

Vamos jogar "top "100px"
em relação ao nosso canvas.

Então, "ctrl + S",

ele já desceu 100 pixels
do nosso topo.

E "left", para jogar ele para o centro.

Vamos jogar um "left: 220px".

Jogamos para o centro.

E aí, a gente entra na nossa
"animation".

A gente escolhe uma propriedade
chamada de "bounce",

lembra do Boucing Ball?

É basicamente a nossa bola quicando.

Vamos acrescentar
0.9 segundos de duração

e queremos que ela seja infinita.

Legal, perfeito.

Nada acontece porque a gente
não criou ainda os nossos keyframes

e, para chamar os nossos keyframes,

nós temos que clicar
nesse "@" lindo aqui

e digitar "keyframes".

Perfeito.

Apontar que nossa animação
é um bounce, né?

Esse mesmo nome aqui
e vamos abrir chaves novamente.

E aí, aqui nós vamos colocar
os nossos keyframes.

Então, em 10%.
Abrindo chaves.

Eu posso aqui colocar 10%, 50%,

é como se fosse um keyframe em 10%,
outro keyframes em 50%,

outro keyframe em 100%.

E aí eu posso variar,
eu posso optar por 1%, 5%, 10%.

Fica ao meu critério.

Neste caso, eu vou usar 10%
e vou colocar "height".

Então, no keyframe de 10%
ele vai ter 50px de "height"

e de "widht" a mesma coisa.

Então vai ser uma circunferência,
uma elipse perfeita.

Só que conforme ela vai descendo
com um impacto,

com aquela velocidade,
ela vai deformando.

Então, eu quero deformar conforme
ela avança na minha timeline.

E então, quando chegar em 30%
da minha timeline,

eu tenho um novo
keyframe que eu vou colocar.

Vou até copiar aqui.
Esse daqui.

Eu vou deformar ela em 40 keyframes.

Está vendo?

Já começou a deformar aqui,
ela deforma para o lado.

E aí, eu vou chegar em 50%
do meu keyframe,

da minha linha do tempo,
onde vou estabelecer esse keyframe.

Quando chegar em 50% a bola
vai bater lá embaixo e vai voltar.

Então, vamos fazer ela bater
lá embaixo.

Mas nesse processo a gente não pode
esquecer que ela se deforma.

Então vou colocar aqui "height"
e width eu vou mudar aqui para 57.

E aqui eu vou colocar 30%.

Quando ela bate no chão,

mas para apontar
que ela bate no chão.

Aí eu coloco o nosso famoso
"transform"

e aplico um translate vertical,
ou seja,

Y de 240 pixels.

Vamos ver, olha lá.

Começou a bater e voltou,

mas eu tenho que apontar
para criar fluidez,

apontar novos keyframes.

E aqui eu vou em 75% da timeline
eu vou habilitar mais um keyframe

e vou criar mais uma deformação
para ela na volta,

que é de 57 pixels e quando chegar
no fim ela volta ao total dela.

Então 100% da linha do tempo
para criar o loop.

Eu não preciso mais do height,

porque no 100%
ela volta ao seu estado normal.

Então eu vou colocar um "transform".

"Transform: translateY",
vertical

e ela volta para o seu ponto inicial
em zero pixels.

Então o que acontece
é mais ou menos isso,

o bouncing ball já criando
este loop infinito de bola quicando

e conforme ela bate
e ela sobe ou ela desce,

ela vai se deformando para buscar
a interpolação mais real possível.

Então, esse foi um exercício clássico
de animação chamado boucing ball

que a gente fez utilizando
o CSS aqui no Visual Code

e utilizando também os keyframes
para apontar na nossa timeline

em que momento a gente quer deformar
ou não o nosso objeto visual,

que no caso aqui é uma bola.

Então, para melhorar
e qualificação animação em código,

pratique muito,
pegue novas animações

ou novos objetos para poder deformar
para poder criar interpolação,

porque só praticando
você vai evoluir a sua animação.