Animações

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 a alternate, 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:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. 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