Introdução

Nós mudamos consideravelmente a maneira em que

interagimos com as interfaces do mundo moderno. Não só as
da web, mas painéis de carro, televisões smart, geladeiras,
controles, são todas interfaces que nos permitem interagir
com algo muito mais complexo - que não precisamos
entender de primeira.

A mente humana funciona de duas formas:

ação e reação

Esse é um dos princípios das interfaces também. Se

realizamos uma ação, precisamos entender que ela foi feita. É
preciso ter uma confirmação, uma reação. É por isso que
botões são animados na web e são apertáveis na vida real.
Queremos saber que aquela ação terá um resultado.

Nesse e-book eu explico os princípios de animação, os três

pilares que você deve dominar para criá-las com CSS (e é
bem mais simples do que parece) e depois crio alguns
componentes com você para adicionar instantaneamente na
sua próxima interface.

Aqui terá imagens e código. Não é possível colocar vídeos,

mas todos os códigos estão disponíveis no site CodePen e eu
disponibilizarei o link para você. Lembrando que esse e-book
não é um tutorial, você não deve pegar os componentes e
reutilizá-los exatamente como criei (até pode, mas não vai
aprender nada assim). Você deve pegar as noções ensinadas
aqui e criar sua própria biblioteca de animação.

Vamos começar.
 O que você precisa
entender antes de
estudar animações?
Antes de embarcar direto no mundo das animações, é bom
entender algumas coisas antes: os elementos em CSS não
são necessariamente estáticos. Existem estados de
elemento, isto é, eles podem estar apresentados de formas
diferentes em momentos diferentes.

Para entender esses momentos, foram criadas algumas

pseudo-classes.

Vamos entender primeiro o que é isso antes de passar para

outro assunto.

Uma pseudo-classe CSS é uma palavra-chave adicionada a

seletores que especifica um estado especial do elemento
selecionado ou um pseudo-elemento. Por exemplo, :hover é
usado quando o cursor está em cima do elemento.

Isso amplia nossa capacidade de estilização. Não estamos

presos à seu estado padrão em relação à árvore DOM, mas
podemos também mudar a aparência de um elemento
baseado em fatores externos como o :visited (que indica que
o usuário já visitou aquele link), a posição do mouse (:hover),
se o elemento está ativo (:active).

Existem várias pseudo-classes, mas você só precisa conhecer

algumas delas. Vamos conhecê-las ao lado:
 Lista de referência
Mozilla

Vamos falar sobre as principais pseudo-classes:

:hover
A pseudo-classe :hover corresponde quando o usuário
designa um elemento com um dispositivo apontador, mas
não necessariamente o ativa. Este estilo pode ser substituído
por qualquer outra pseudo-classe de link-relacionados, isto é
:link, :visited, e :active, aparecendo em regras subsequentes.

Na ordem para estilizar apropriadamente links, você precisa

colocar a regra :hover depois das regras :link e :visited mas
antes da regra :active, como definido pela ordem LVHA: :link
— :visited — :hover — :active.
:focus

A pseudo-classe :focus do CSS é aplicada quando um

elemento recebe foco, o que pode ocorrer quando o usuário
seleciona o elemento utilizando o teclado ou ativando o
mesmo com o mouse (ex: um campo de um formulário).
A pseudo classe é aplicada apenas ao elemento focado, e
não aos seus elementos ascendentes, como ocorre com
:checked e :enabled e diferentemente de :active ou :hover.
:first-child

A pseudo-classe de CSS :first-child representa qualquer

elemento que seja o primeiro filho de seus pais.

Por exemplo, numa lista com três elementos li, você vai estar
acionando o primeiro.

:last-child

A CSS pseudo-classe :last-child representa qualquer

elemento que é o último filho de seu elemento pai.

Por exemplo, nessa mesma lista, você vai estar acionando o

último elemento li.

:nth-child()

A pseudo-classe CSS :nth-child() seleciona elementos com

base em suas posições em um grupo de elementos irmãos.

Por exemplo, usando ainda a lista anterior, usando

nth-child(odd) vamos acionar todos os elementos cuja
posição equivale a um número ímpar (a primeira e a última.)
Entendendo os pseudo-elementos:

Um pseudo-elemento CSS é uma palavra-chave adicionada a

um seletor que permite que você estilize uma parte
específica do elemento selecionado. Por exemplo, o
pseudo-elemento ::first-line aplica o estilo apenas na primeira
linha do elemento especificado pelo seletor.

Assim como as pseudo-classes, existem vários

pseudo-elementos:

Você só precisa entender dois por enquanto: ::after e ::before.

::before

Assim é possível criarmos um pseudo-elemento que é o

primeiro filho do elemento atingido. É frequentemente
utilizado para adicionar conteúdo decorativo à um elemento
utilizando a propriedade content.

Por exemplo: podemos usar o ::before para adicionar aspas (“”)

antes de um um quote.

Este elemento é inline por padrão.

Atenção: A notação ::before (com dois colons) foi introduzida

no CSS3 para diferenciar pseudo-classes de
pseudo-elementos. Você pode continuar usando a notação
:before, mas é recomendado usar a nova notação.
::after

Já o ::after cria um pseudo-elemento que é o último filho do

elemento selecionado. Muitas vezes é usado para adicionar e
melhorar o conteúdo de um elemento como a propriedade
content.

Por exemplo: Podemos adicionar um bilh ete após parágrafos

usando a propriedade content.

É inline por padrão.

Atenção: A notação ::after sofreu as mesmas mudanças.

Prefira a nova notação à antiga.
 Respeite o usuário
A gente conhece bem o problema do típico website de
empresas grandes em 201X: um monte de pop-up, um monte
de aviso de cookie, notificação, desligar o ad-block, mil
anúncios, animações desnecessárias… Ninguém quer ser
atrapalhado enquanto tenta procurar por uma informação ou
lê um artigo.

Animações tem um propósito no design de interfaces, mas

não devem tomar espaço do que é realmente importante: o
conteúdo. No fundo, páginas web são apenas documentos de
texto que nós começamos a organizar e estilizar com cada
vez mais complexidade.

Não achem que o usuário vai querer esperar 5 segundos a

mais para abrir uma página só para ver uma animação
inteligente que você colocou bem no meio dela.

E também não achem que animações em si são apenas um

detalhe que pode muito bem ser ignorado. Não, elas servem
para demonstrar que você pode realizar uma ação, pode
deixar o conteúdo mais mastigável para o usuário, podem se
incorporar com os menus, deixando a experiência muito mais
interessante.

É esse seu trabalho como criador de interfaces: respeitar e

cuidar do usuário. Quanto mais fácil você tornar a vida dele,
mais ele vai gostar do seu produto.

Vamos falar um pouco sobre navegadores.

Todos os navegadores modernos (digamos Safari, Google
Chrome, Opera, Mozilla Firefox, Edge - até mesmo Internet
Explorer a partir da versão IE10) aceitam transitions CSS. Então
você tem um suporte muito bom para criar esse tipo de
animação usando essa propriedade importante.

Agora, se um navegador por qualquer razão ainda não tem

suporte, tudo que ocorrerá é a mudança do estado inicial para
o final de uma forma mais brusca. Não há “timing” nem fluidez,
apenas uma mudança de estado (por exemplo, de estado
normal para :hover).

É ainda menos comum que você precise trabalhar com

navegadores IE mais novos ou então versões de Android
abaixo de 4.3. Mas caso precise, existem algumas bibliotecas
chamadas de Javascript polyfill que fazem o trabalho para
você. Essa informação fica então a nível de curiosidade.

Se preocupem apenas com a criação de animações que

fazem sentido estarem dentro do seu produto. Não torne seu
site ou software em um carnaval de animação.
 Princípios
de Animação:
Animação é uma área vasta e complexa, que muitos
profissionais passam anos tentando dominar, assim como a
área de programação ou design. Meu objetivo com esse
ebook não é transformar você em um animador, mas dar uma
introdução a esse universo que pode transformar os produtos
que você cria.

Nós gostamos de movimento. Faz com que as coisas

pareçam vivas. Hoje temos robôs que nos escutam, falam
com a gente, se movem, nos dão respostas (Cortana, Siri,
Walter, etc). Usar um aplicativo que responde a cada
movimento seu é extremamente satisfatório.

Quem não gosta de ficar jogando o joguinho do dinossauro no

Chrome quando a internet cai? É uma das milhares de formas
de dar uma interação a mais para o usuário.

Mas como entender o que faz uma animação ser boa ou não?
Em vez de eu tentar criar uma análise a partir do meu
conhecimento, é melhor que eu mostre o que os gigantes da
área pensam nisso. Vou usar o livro Disney Animation: The
Illusion of Life como referência para explicar os 12 princípios
que a Disney aprimorou.

Comprimir e esticar (Squash & Stretch):

Esse princípio explica como o movimento afeta a forma das
figuras. Quando você boceja, seu rosto se estica todo, seus
olhos ficam comprimidos, e sua forma muda um pouco.
Quando anda, parece que se estica mais ao dar as passadas e
se encolhe um pouco quando firma o pé no chão. E uma bola
ao bater no chão, é comprimida rapidamente pelo impacto e
logo é esticada para sua forma original quando volta para o ar.

Esse princípio segue uma regra clara: sempre mantenha o

volume da forma durante o movimento.

Antecipação (Anticipation):

Antes de um movimento, existe uma preparação, uma

antecipação do movimento. Você não vê nenhum desenho
em que o personagem não dê um impulso antes de correr,
por mais sutil que seja. Isso porque nem a gente faz isso.
Antes de um movimento (como correr), é preciso de um
momento de antecipação, um momento em que o objeto se
prepara para uma nova ação. É aquele delay que você
demora para processar uma informação, uma emoção, uma
resposta, uma ação.

Encenação (Staging):
Este princípio diz que você precisa apresentar uma ação de
forma clara para o espectador. A expressão precisa estar
clara, o movimento fluido e visível. Isso está relacionado,
muitas vezes, com o ângulo que você escolhe para mostrar o
que quer.

Uma das regras desse princípio é que se você consegue

entender o que está acontecendo com apenas uma silhueta,
então fez uma boa encenação.
Encenação (Staging):
Este princípio diz que você precisa apresentar uma ação de
forma clara para o espectador. A expressão precisa estar
clara, o movimento fluido e visível. Isso está relacionado,
muitas vezes, c om o ângulo que você escolhe para mostrar o
que quer.

Uma das regras desse princípio é que se você consegue

entender o que está acontecendo com apenas uma silhueta,
então fez uma boa encenação.

Animação direta e pose a pose (Straight

Ahead Action and Pose to Pose):

Há dois métodos para animar uma cena, o “direto” (straight

ahead) e o “pose a pose”. No primeiro método de animação
direta, o animador desenha o movimento um após o outro até
o fim da cena. A animação é mais fluida, fica menos mecânica.
Nesse método tem menos planejamento, ele vai criando
conforme vai desenhando.

Já no segundo método, “pose a pose”, o animador planeja os

extremos cuidadosamente, seguindo um intervalo e um
timing desejado. Assim existe mais controle e clareza.

Continuidade e sobreposição da ação

(Overlapping Action and Follow Through):

O princípio da sobreposição da ação dita que nem todos os

movimentos param quando um personagem para. Isso
porque isso também não acontece na vida real.
Quando você corre e pára de repente, existem alguns
movimentos que ainda acontecem, por exemplo: o cabelo
não deixa de se mover instantaneamente, você continua
respirando ofegante, seus braços demoram a parar de se
mexer. Se o personagem tem elementos como orelhas
grandes, cauda ou casaco, estas partes continuam a se mover
mesmo após a figura ter parado.

Aceleração e desaceleração (Slow In and

Slow Out):

Esse é um dos princípios mais comuns. É diretamente

relacionado ao timing da animação. Algumas animações
terão um movimento mais brusco, outras serão mais lentas. E
existe uma curva que todas elas respeitam, podendo ser
linear, slow in, slow out, etc. As chamadas keyframes, chaves
de intercalação, indicam os intervalos nos movimentos. Esses
intervalos resultam em movimentos mais interessantes, mais
dinâmicos.

Movimento em arco (Arcs):

A maioria dos seres vivos executa movimentos com uma

trajetória circular ou “arco”. A ação de uma mão com o dedo
apontado segue a trajetória circular. O animador marca as
posições dos extremos e dos intervalos ao longo do arco.
Intervalos feitos fora do arco irão quebrar o movimento
radicalmente.
Ação Secundária (Secondary Ations):

Geralmente, a ideia apresentada em uma cena pode ser

fortalecida por ações secundárias. Essas ações secundárias
dão a principal muito mais profundidade. Uma maneira de se
conseguir uma ação secundária convincente é fazer um
planejamento inicial do que vai ser a cena, e depois animar
por partes, primeiro a ação principal e depois as ações
secundárias que podem ter timing diferentes.

Temporização (Timing):

O controle do “Timing” ou tempo do movimento é essencial

para que possamos atingir o efeito desejado na animação. A
medida em que os personagens foram se desenvolvendo, as
suas personalidades eram definidas mais pelos movimentos
do que pela aparência, e a variação de velocidade nos
movimentos determinava se o personagem era calmo,
nervoso, excitado etc.

Exagero (Exaggeration):
O exagero é essencial para que se consiga uma boa
comunicação. Seus movimentos não precisam ser
necessariamente caricatos, ainda mais se não for seu estilo,
mas um exagero nos movimentos, por exemplo em “Squash &
Stretch”, no “Follow “Through” e nas “Secondary Actions” vai
deixar sua animação bem mais dinâmica e com uma
comunicação bem mais clara.
Desenho volumétrico (Solid Drawing):

O desenho tem que demonstrar ser mais do que apenas um

desenho, um conjunto de formas. Precisa de peso,
profundidade e equilíbrio. Procure evitar que ele seja
completamente espelhado. Ou seja, faça os olhos de
tamanhos diferentes, dê mais destaque para uma parte do
personagem.

Atração (Appeal):

O princípio da atração nos mostra que acabamos nos

conectando a um personagem, a um objeto se ele for
atraente para a gente. Personagens fofinhos como Stitch,
Baby Yoda, Pikachu acabam se tornando tão icônicos para as
pessoas que gera um interesse maior em ver algo relacionado
a esses personagens. Isso gera um magnetismo muito forte.
Qualquer personagem deve ter um design atraente, seja o
herói ou vilão. Tem que gerar interesse.
 Os 3 Pilares
das animações
com CSS:
Quando a gente olha uma animação feita com nada mais que
HTML e CSS, parece até que foi criada por magia. É difícil ver
como isso se traduz em código. Como sequer é possível
transformar isso em código?

Isso porque a gente esquece que CSS tem sim ferramentas

poderosas de animação, são as mesmas bases de programas
criados exclusivamente para isso. Essas três ferramentas são
os pilares da animação com CSS, e são bem mais simples do
que parecem. São:

Transforms, transitions e animations.

Até parecem que fazem as mesmas coisas - cuidam do

movimento de algum elemento - mas na verdade cada uma
tem um caso específico.

CSS transitions e animations criam movimento baseado em

tempo. Para acontecer uma transição ou animação, você
precisa definir dois ou mais estados de elemento. Você
precisa definir como ele começa e como termina. Se é um
movimento para o lado, você vai definir a posição inicial e a
posição final. A mesma coisa com animations.

Já os transforms mudam a aparência de um elemento a partir

de especificações como translação, rotação, escala e
skewing. Essas especificações não precisam de tempo, é só
declarar em um estado diferente como :hover ou :focus que a
transformação será feita.

Agora, se você quer uma animação que ocorra durante um

certo tempo, você precisa trabalhar com transitions ou
animações. Tudo que você poderia fazer com Javascript se
torna muito mais simples entendendo os fundamentos
dessas propriedades em CSS - além disso, é mais rápido e
gera menos custo para o navegador.

Vamos falar um pouco de cada uma dessas propriedades

então:

Transforms:

Essa propriedade permite modificar o elemento a partir de

valores definidos. Você não precisa criar um “antes” e “depois”
caso queira criar um elemento estático, mas para “animações”
com transform precisam estar em estados diferentes do
elemento.

Vamos usar um quadrado como exemplo. Ao criá-lo

normalmente, ele é desenhado na tela em seu estado
original.
Mas se eu quiser rotacioná-lo para o lado, digamos, 45 graus,
eu escrevo o seguinte código em sua classe e o desenho
muda.

A nomenclatura em inglês é deg de degrees, que significa

graus.

Vamos então usar outro exemplo. Nesse, eu quero que meu

quadrado aumente de tamanho ao passar o mouse por cima.
Quero que sua escala aumente.

Esse tipo de código é muito comum para criação de botões

com mini interações com o usuário. É uma forma de mostrar
que o usuário pode clicar ali que se tornou muito comum.
Uma lista de possíveis transformações:

transform: rotate(ângulo);
Rotaciona o elemento em sentido horário baseado no ângulo
mencionado.

transform: scale(sx[, sy]);

Aumenta a escala do elemento em duas dimensões (x = eixo
horizontal, y = eixo vertical). Caso indiquemos apenas um
valor, será entendido como sxy.

transform: scaleX(sx);
Aumenta a escala do elemento no eixo horizontal.

transform: scaleY(sy);
Aumenta a escala do elemento no eixo vertical.

transform: skewX(angle);
Inclina o elemento de forma que suas laterais e bases formem
um determinado ângulo com o eixo X.

transform: skewY(angle);
Inclina o elemento de forma que suas laterais e bases formem
um determinado ângulo com o eixo Y.

transform: translate(tx[, ty])

Desloca o elemento de sua posição atual até a unidade
declarada. Caso seja usado um único valor, será entendido
como translate(txy).

transform: translateX(tx)
Desloca o elemento de sua posição atual até a posição
declarada no eixo horizontal.
transform: translateY(ty)
Desloca o elemento de sua posição atual até a posição
declarada no eixo vertical.

Transitions:

Na verdade, transition é uma propriedade abreviada que

engloba as seguintes propriedades: transition-property,
transition-duration, transition-timing-function e transition-delay.
Vamos ver o que cada uma faz, assim você vai entender com
o construir suas próprias transições.

transition-property:
Aqui, nós definimos que propriedade(s) vamos aplicar o efeito
de transição. Você só precisa indicar o nome dela. Ou seja, se
quer mudar a cor de fundo do elemento, é só escrever
transition-property: background-color;

Agora, podemos também escrever uma lista de propriedades

usando a vírgula para indicar que queremos que todas elas
mudem com a transição. Também podemos indicar que todas
as propriedades do elemento serão modificadas, usando
transition-property: all. O mesmo é feito com none, que indica
que nenhuma propriedade será modificada.

transition-duration:
Essa é bem simples, indica apenas a duração da nossa
transição. Uma transição de 3 segundos será escrita como
transition-duration: 3s. Se você quiser usar milissegundos,
você pode com a abreviação ms.
transition-timing-function:
Essa propriedade cuida do timing, em como a transição irá se
comportar dentro da nossa duração. Isto é, pode ser que ela
seja mais rápida no início e vá diminuindo a velocidade
conforme o tempo vai acabando. Esses tipos de declarações
são chamadas de easing.

Para indicar o easing de uma transição, você pode usar as

nomenclaturas, usar uma curva de Bézier, ou stepping
functions. A forma mais fácil de usar é a de nomenclaturas, e
é a que vamos trabalhar neste guia.

A lista de nomenclaturas e o que elas fazem:

ease;
A sua curva está no meio. Começa lento, fica mais rápido e
termina lento.

linear;
Significa que a animação seguirá uma linha, não terá
mudança na velocidade em nenhum momento.

ease-in;
Começa lento e termina rápido.

ease-out;
Começa rápido e termina lento.

ease-in-out;
Parecido com o ease, começa lento, continua rápido e
termina não tão lentamente assim. É um pouco mais
equilibrado, sua curva é menos acentuada.
transition-delay:
Essa propriedade vai adicionar um delay para o início da
transição. Se você mudar o estado do elemento sem um
delay, a mudança acontecerá imediatamente. Adicionando
um valor de delay, essa animação vai demorar um pouco a
acontecer.

Em certos casos, é desejável adicionar a propriedade

transform-delay para indicar realmente que a transição
ocorreu propositalmente.

Animations:

A propriedade animation também é uma propriedade

abreviada para animation-name, animation-duration,
animation-timing-function, animation-delay,
animation-iteration-count, animation-direction,
animation-fill-mode e animation-play-state.

Antes de explicar esse monte de propriedades, vamos

entender o que são keyframes:

Com a regra @keyframes, você descreve como o elemento

animado deveria se renderizar a um tempo dado durante a
sequência de animação. Ou seja, são momentos chave em
que há uma mudança na renderização do elemento.

Por exemplo, se eu quiser criar uma animação que mude

minha cor de fundo de branco para preto, criarei 2 keyframes,
um ao 0% da animação com a cor original (branco) e outro a
100% da animação com a nova cor (preto). Se eu quiser
adicionar um vermelho nesse meio tempo, posso muito bem
criar um keyframe 50% para essa cor. E por aí vai.
animation-delay
Configura o delay entre o tempo em que o elemento é
carregado e o início da sequência de animação.

animation-direction
Configura se a animação deve ou não alternar a direção em
cada execução durante a sequência ou voltar ao ponto inicial
e se repetir.

animation-duration
Configura o tempo que uma animação deveria levar para
completar um ciclo.

animation-iteration-count
Configura o número de vezes que uma animação deveria se
repetir; você pode especificar infinito para repetir a animação
indefinidamente.

animation-name
Especifica o nome da regra @keyframes, identificando sua
animação.

animation-play-state
Permite você pausar e resumir a sequência da animação.

animation-timing-function
Essa propriedade configura o timing da animação, como ela
vai transitar por keyframes através das curvas de aceleração.

animation-fill-mode
Configura que valores são aplicados pela animação antes e
depois de se executar.
 Componentes Animados
para uma UI mais interativa:
As próximas páginas irão explicar como criar alguns
componentes que vão deixar suas interfaces mais
interessantes com um pouco de animação.

Cada componente virá acompanhado de um link do

CodePen.io para que vocês possam acompanhar a criação e
visualizar o componente finalizado.

Spinner:
Loader:

Elemento final

Efeito Touch
Botão Slide

Elemento final
Seta em Movimento
(Bouncing)
Efeito de Hover em Highlight

Input Hover
 Obrigada por ler
esse guia!
O início do projeto que começou no Instagram foi
focado em animações em CSS. Depois eu queria
criar mais posts explicando como funcionava a
estrutura de uma animação, mas percebi que era
coisa demais pra dividir em poucos posts.

Acabou se tornando um e-book de 25+ páginas.

Infelizmente não consigo mostrar tudo aqui. É um

assunto muito extenso.

Mas com esse guia você vai ter uma base para
transfomar completamenete suas interfaces!

Conecte-se
comigo!
instagram.com.br/laracarvalhonet
contato@laracarvalho.net

laracarvalho.net