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;
}
}
pulse para ver como a animação muda.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-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-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 1O animation-timing-function também é mais conhecido como:
Qual é o número mínimo de frames-chave necessário em uma animação @keyframes?