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.

o edit

em 50 pixels.

Contra o S
e já forma mais um pouquinho.

E para arredondar os cantos
eu vou jogar um border, porém

com um 50%

já foi mão nossa bolinha e

adoro quando forma nessa bolinha,
já que o nosso canvas é um position

absolute, vamos colocar aqui
um position relativo

relative

e top 100 pra gente

definir onde é o ponto de partida
na nossa bolinha.

Vamos jogar

Top 100 pixel

em relação ao nosso canvas,
então a Control S

ele já vem de céu e 100 pixels
no nosso topo

e left.

Para jogar ele para o centro
vamos jogar um left de 220

pixel.

Jogamos para o centro

e aí a gente
entra na nossa animation.

A gente escolhe uma propriedade

chamada de bom Se

lembra do bom símbolo?

É basicamente a nossa bolinha
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 nossas que frames?

E para chamar os nossos keyframes
nós temos que clicar neste arroba

lindão aqui e digitar keep frames.

Perfeito!

Aponta que nossa animação
é um bounce que é bom sim,

é esse mesmo nomezinho aqui

e vamos abrir chaves novamente.

E aí?

Aqui nós vamos colocar os nossos
keyframes.

Então em 10%.

E abrindo chaves
eu posso aqui colocar

10%, 50%,
um que é como se fosse um keyframe

em 10% de frames, 50
um frame em 100%.

E aí eu posso variar, eu posso ficar
1%, cinco, dez.

Fica ao meu critério.

Neste caso eu vou usar 10%
e vou colocar Ray.

Então em que frame dez de 10%
ele vai ter?

50 pixels de corrente e de widgets
a mesma coisa.

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

Só que ela vai e 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 eu chegar
em 30% da minha timeline,

eu tenho um novo
que frame que eu vou colocar?

Vou até copiar aqui.

Esse daqui como?

Eu vou deformar ela

em 40.

Que frames já vem?

Nós Já começou a deformar aqui.

Ela deforma para o lado e aí
eu vou chegar

em 50% do meu que frame

da minha linha do tempo onde eu vou
estabelecesse que frame

que a bolinha vai ser
Quando chegar em 50%

a bolinha 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 rente.

E eu disse
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.