A animação é uma ótima maneira de destacar elementos interativos e adicionar interesse e divertidos nos seus designs. Neste módulo, você vai aprender a adicionar e controlar de animação com CSS.
Às vezes você encontra pequenos auxiliares em interfaces informações sobre a seção em que elas estão quando você clica nelas. Elas geralmente têm animação pulsante para informar sutilmente que a informação está lá e as pessoas precisam interagir. Este módulo mostra como criar esses auxiliares e outras animações usando CSS.
Use 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 a animação estados a carimbos de data/hora em uma linha do tempo.
Por exemplo, esta é uma linha do tempo para o "helper" pulsante ponto A animação é executada por 1 segundo e tem dois estados.
Há um ponto específico em que cada um desses estados da animação começa e termina. Mapeie-os na linha do tempo com frames-chave.
@keyframes
CSS @keyframes
são baseados no mesmo conceito dos
frames de animação dos frames-chave.
Confira um exemplo com dois estados:
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
A primeira parte importante é
identificador personalizado (custom-ident
),
o nome da regra de frames-chave. O identificador neste exemplo é my-animation
.
O identificador personalizado funciona como o nome de uma função,
permitindo que você faça referência à regra de frames-chave em outro lugar do código CSS.
Dentro da regra de frames-chave, from
e to
são palavras-chave que representam 0%
e
100%
, que representam 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 são convertidos em dois frames-chave. Isso significa que você tem duas posições dentro da regra de frames-chave para representam as alterações de cada um desses frames-chave.
@keyframes pulse {
0% {
opacity: 0;
}
50% {
transform: scale(1.4);
opacity: 0.4;
}
}
As propriedades animation
Para usar o @keyframes
em uma regra CSS, é possível definir várias opções de animação
propriedades individualmente ou use a animation
propriedade abreviada.
animation-duration
.my-element {
animation-duration: 10s;
}
O objeto animation-duration
define o comprimento da linha do tempo @keyframes
como um valor temporal.
O padrão é 0 segundos, o que significa que a animação ainda é executada, mas será
rapidamente para você ver. Não é possível usar valores de tempo negativos.
animation-timing-function
Para ajudar a recriar o movimento natural em uma animação, você pode usar funções de tempo que
para calcular a velocidade de uma animação em cada ponto. Os valores calculados geralmente são
curvo, fazendo com que a animação seja executada em velocidades variáveis ao longo do
animation-duration
e fazer com que o elemento pareça quicar se o navegador
calcula 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
animation-timing-function:
linear
, ease
, ease-in
, ease-out
e ease-in-out
.
.my-element {
animation-timing-function: ease-in-out;
}
Os valores da função de easing parecem curvar porque o easing é calculado utilizando uma
Curva de Bézier, um tipo de função usada para modelar a velocidade. Em cada um dos horários
palavras-chave de função, como ease
, fazem referência a 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 plotam cada parte da curva ao longo dos eixos X e Y.
Compreender as curvas de Bézier é complicado. Ferramentas visuais, como esta gerador de Lea Verou, foram muito úteis.
A função de easing steps
Às vezes, convém ter um controle mais granular da animação ao
movendo-se em intervalos, em vez de ao longo de uma curva. A função de easing steps()
permite
divida 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 como etapas, cada frame-chave é reproduzido em sequência pela duração exata do etapa, sem transição entre estados. Se houver menos frames-chave do que etapas, o navegador adicionará etapas entre dependendo do segundo argumento.
O segundo argumento é a direção. Se ele estiver definido como end
, que é o
padrão, as etapas terminam no fim da linha do tempo. Se ele estiver definido como start
,
a primeira etapa da animação termina assim que começa, ou seja, ela
termina uma etapa antes de end
.
animation-iteration-count
.my-element {
animation-iteration-count: 10;
}
O método animation-iteration-count
define quantas vezes a linha do tempo @keyframes
deve ser executada durante o
animação. Por padrão, é 1, o que significa que a animação será interrompida quando
chega ao fim da sua linha do tempo. Esse valor não pode ser um número negativo.
Para fazer a animação ser repetida, defina a contagem de iterações como infinite
. É assim que
a animação pulsante desde o início desta lição funciona.
animation-direction
.my-element {
animation-direction: reverse;
}
É possível definir a direção que a linha do tempo passa sobre os frames-chave com o animation-direction, que assume os seguintes valores:
normal
: o valor padrão, que é de encaminhamento.reverse
: é executado de forma retroativa na linha do tempo.alternate
: para cada iteração da animação, a linha do tempo alterna entre correr para frente e para trás.alternate-reverse
: semelhante aalternate
, mas a animação começa com o do cronograma de trás para frente.
animation-delay
.my-element {
animation-delay: 5s;
}
O método animation-delay
define quanto tempo o navegador aguarda antes de iniciar a animação.
Assim como a propriedade animation-duration
, esse método usa um valor de tempo.
Ao contrário de animation-duration
, é possível definir animation-delay
como um valor
, o que faz com que a animação comece no ponto correspondente no seu
na linha do tempo. Por exemplo, se a animação tiver 10 segundos de duração e você definir
De animation-delay
a -5s
, a animação começa na metade do
na linha do tempo.
animation-play-state
.my-element:hover {
animation-play-state: paused;
}
Animation-play-state
permite reproduzir e pausar a animação.
O valor padrão é running
. Se você definir como paused
, a animação será pausada.
animation-fill-mode
animation-fill-mode
define quais valores na sua linha do tempo @keyframes
persistem antes que
a animação começa ou termina. O valor padrão é none
, o que significa que
quando a animação estiver concluída, os valores na linha do tempo serã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 frame-chave são mantidos.
A abreviação animation
Em vez de definir cada propriedade separadamente, você pode defini-las de uma maneira
animation
, que permite definir as propriedades de 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 preferir movimento reduzido ao interagir com aplicativos e sites. É possível detectar essa preferência usando o método prefers-reduced-motion. consulta de mídia:
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}
Essa não é necessariamente uma preferência por nenhuma animação. É uma preferência por menos animação, especialmente uma animação menos inesperada. Saiba mais sobre essa preferência e o desempenho geral 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?
As palavras-chave from
e to
são iguais a:
0%
e 100%
.start
e end
.0
e 1
O animation-timing-function
também é conhecido como:
Qual é o número mínimo de frames-chave necessários em uma animação @keyframes
?