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, se não,
não reconhece.

E aqui dentro do corpo
aqui da minha interface

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

e dentro do "mycanvas"
eu coloquei duas div,

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,

aonde 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
de azul "aqua" esse, 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 saber

para aparecer a altura e largura.

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

aqui width 500px
e vou dar um "control + 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"
eu quero que seja automático

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

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

Opa, não foi?
Ponto, 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 minha classe,

vou abrir chaves e vou colocar,

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

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

Vou por "brown".

Será que vai ficar
um contraste legal?

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

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

Width em 50 pixels.

"Control + 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, "control + S"

ele já cesceu 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
neste "@" lindo aqui

e digitar "keyframes".

Perfeito!

Apontar que nossa animação
é um bounce

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 10%,
outro keyframes 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 chegarem 50%
do meu keyframe,

da minha linha do tempo,
onde eu 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, 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 e aplico

perdão,
um translate vertical, ou seja, Y

de 240 pixels.

Vamos ver, vamos lá.

Começou a bater e voltou,
mas eu tenho que apontar para criar

fluidez,

apontar novos que frames?

E aqui eu vou em 75%

eu vou abrir a timeline,
eu vou habilitar mais um que frame

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

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

Então 100% da linha do tempo

para criar o Lupita.

Um raide Eu vou?

Não, eu não preciso mais o raide,
porque aí ela volta não 100%.

Ela volta ao seu estado normal.

Então eu vou colocar um transform.

Transform Trans frames.

Cada um está aqui,
então vou mais rápido.

Translate e y na vertical

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

Então o que acontece

é mais ou menos isso o boss Symbol
já criando o estilo ping infinito

infinito.

Aqui onde

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 Balfe

bom que a gente fez
utilizando o CSS aqui no Visual CUT

e utilizando também os frames
para apontar na nossa timeline.

Em que momento
em que a gente quer deformar ou não

o nosso objeto visual,
que no caso aqui é uma bolinha.

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.