Uma animação é uma ótima maneira de destacar elementos interativos e adicionar interesse e diversão aos seus designs. Neste módulo, descubra como adicionar e controlar efeitos de animação com CSS.
Às vezes, você vê pequenos auxiliares nas interfaces que fornecem informações úteis sobre a seção em que se encontram quando você clica neles. Eles geralmente têm uma animação pulsante para informar sutilmente que as informações estão lá e precisam ser interativas. Este módulo mostra como criar esses auxiliares e outras animações usando CSS.
É possível usar CSS para definir uma sequência de animação com frames-chave. Essas sequências podem ser animações básicas de um estado ou sequências complexas baseadas em tempo.
O que é um frame-chave?
Na maioria das ferramentas de animação, os frames-chave são o mecanismo usado para atribuir estados de animação a carimbos de data/hora em uma linha do tempo.
Por exemplo, aqui está uma linha do tempo para o ponto "helper" piscando. A animação é executada por 1 segundo e tem dois estados.
Há um ponto específico em que cada um desses estados de animação começa e termina. Você faz o mapeamento deles na linha do tempo com frames-chave.
@keyframes
O CSS @keyframes
é baseado no mesmo conceito dos frames-chave de animação.
Confira um exemplo com dois estados:
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
A primeira parte importante é o
identificador personalizado (custom-ident
),
o nome da regra de frames-chave. O identificador neste exemplo é my-animation
.
O identificador personalizado funciona como um nome de função,
permitindo que você faça referência à regra de frames-chave em outro lugar no código CSS.
Dentro da regra de frames-chave, from
e to
são palavras-chave que representam 0%
e
100%
, que são o início e o fim da animação.
Você pode recriar a mesma regra desta forma:
@keyframes my-animation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
Você pode adicionar quantas posições quiser ao longo do período. No exemplo auxiliar pulsante, há dois estados que se traduzem em dois frames-chave. Isso significa que você tem duas posições dentro da regra de frames-chave para representar as mudanças de cada um deles.
@keyframes pulse {
0% {
opacity: 0;
}
50% {
transform: scale(1.4);
opacity: 0.4;
}
}
Propriedades animation
Para usar seu @keyframes
em uma regra CSS, defina várias propriedades de
animação individualmente ou use a propriedade abreviada
animation
.
animation-duration
.my-element {
animation-duration: 10s;
}
A propriedade animation-duration
define quanto tempo a linha do tempo @keyframes
precisa ter como um valor de tempo.
O padrão é 0 segundo, o que significa que a animação ainda será executada, mas será muito
rápido para você ver. Não é possível usar valores de tempo negativos.
animation-timing-function
Para recriar o movimento natural na animação, use funções de tempo que
calculam a velocidade de uma animação em cada ponto. Os valores calculados geralmente são
curvos, fazendo com que a animação seja executada em velocidades variáveis ao longo de
animation-duration
e fazendo com que o elemento pareça saltar se o navegador
calcular um valor além dos definidos em @keyframes
.
Há várias palavras-chave disponíveis como predefinições no CSS, que são usadas como o valor para
animation-timing-function:
linear
, ease
, ease-in
, ease-out
, ease-in-out
.
.my-element {
animation-timing-function: ease-in-out;
}
Os valores da função de easing parecem se curvar porque o easing é calculado usando uma
curva de Bézier, um tipo de função usado para modelar a velocidade. Cada uma das palavras-chave
de função de tempo, como ease
, referencia uma curva de Bézier predefinida. No CSS,
é possível definir uma curva de Bézier diretamente usando a função cubic-bezier()
,
que aceita quatro valores numéricos: x1
, y1
, x2
, y2
.
.my-element {
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}
Esses valores representam cada parte da curva ao longo dos eixos X e Y.
Compreender as curvas de Bézier é complicado. Ferramentas visuais, como este gerador de Lea Verou, são muito úteis.
A função de easing steps
Às vezes, você pode querer ter um controle mais granular da animação,
se movendo em intervalos em vez de ao longo de uma curva. A função de easing steps()
permite
dividir a linha do tempo em intervalos definidos de duração igual.
.my-element {
animation-timing-function: steps(10, end);
}
O primeiro argumento é o número de etapas. Se houver o mesmo número de frames-chave que as etapas, cada frame-chave será reproduzido em sequência pela duração exata da etapa, sem transição entre estados. Se houver menos frames-chave do que etapas, o navegador adicionará etapas entre os frames-chave, dependendo do segundo argumento.
O segundo argumento é a direção. Se ele estiver definido como end
, que é o
padrão, as etapas terminarão no final da linha do tempo. Se ele estiver definido como start
,
a primeira etapa da animação vai ser concluída assim que começar, o que significa
que ela termina uma etapa antes de end
.
animation-iteration-count
.my-element {
animation-iteration-count: 10;
}
A propriedade animation-iteration-count define quantas vezes a linha do tempo @keyframes
precisa ser executada durante a animação. Por padrão, esse valor é 1, o que significa que a animação será interrompida quando
chegar ao fim da linha do tempo. Esse valor não pode ser um número negativo.
Para que a animação seja repetida, defina a contagem de iterações como infinite
. É assim que
a animação pulsante do início desta lição funciona.
animation-direction
.my-element {
animation-direction: reverse;
}
É possível definir a direção da linha do tempo sobre os frames-chave com a animation-direction, que usa estes valores:
normal
: o valor padrão, que é encaminhamento.reverse
: é executada de trás para frente na linha do tempo.alternate
: para cada iteração de animação, a linha do tempo alterna entre corrida para frente e para trás.alternate-reverse
: semelhante aalternate
, mas a animação começa com a linha do tempo voltando.
animation-delay
.my-element {
animation-delay: 5s;
}
A propriedade animation-delay define quanto tempo o navegador aguarda antes de iniciar a animação.
Assim como a propriedade animation-duration
, isso usa um valor temporal.
Ao contrário de animation-duration
, você pode definir animation-delay
como um valor
negativo, o que faz a animação começar no ponto correspondente da
linha do tempo. Por exemplo, se a animação tiver 10 segundos e você definir
animation-delay
como -5s
, a animação vai começar na metade da
linha do tempo.
animation-play-state
.my-element:hover {
animation-play-state: paused;
}
A propriedade animation-play-state
permite reproduzir e pausar a animação.
O valor padrão é running
. Se ele for definido como paused
, a animação será pausada.
animation-fill-mode
A propriedade animation-fill-mode define quais valores na linha do tempo @keyframes
persistem antes do início ou depois do término da animação. O valor padrão é none
, o que significa que,
quando a animação é concluída, os valores na linha do tempo são descartados.
Outras opções incluem:
forwards
: o último frame-chave persiste, com base na direção da animação.backwards
: o primeiro frame-chave persiste, com base na direção da animação.both
: o primeiro e o último frames-chave são mantidos.
A abreviação animation
.
Em vez de definir cada propriedade separadamente, você pode defini-las usando uma
abreviação de animation
, que permite definir as propriedades da animação na
seguinte ordem:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
.my-element {
animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}
Considerações ao trabalhar com animação
Os usuários podem configurar o sistema operacional para priorizar movimentos reduzidos ao interagir com aplicativos e sites. Você pode detectar essa preferência usando a consulta de mídia prefers-reduced-motion:
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}
Não se trata, necessariamente, de uma preferência para nenhuma animação. É uma preferência por menos animação, especialmente menos animações inesperadas. Saiba mais sobre essa preferência e o desempenho geral no nosso guia de animação.
Teste seu conhecimento
Teste seus conhecimentos sobre animações
O nome ou identificador personalizado de uma animação @keyframes
diferencia maiúsculas de minúsculas?
SWOOP
e swoop
coexistam.As palavras-chave from
e to
são as mesmas que:
start
e end
.0%
e 100%
.from
é o mesmo que 0%
, e to
é igual a 100%.0
e 1
O animation-timing-function
também é mais conhecido como:
Qual é o número mínimo de frames-chave necessário em uma animação @keyframes
?