Animações

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 em interfaces que, quando clicados, fornecem informações úteis sobre essa seção específica. Eles geralmente têm uma animação pulsante para informar sutilmente que a informação está lá e precisa ser interativa. Mas como fazer isso com CSS?

No CSS, você pode fazer esse tipo de animação usando animações CSS, que permitem definir uma sequência de animação por meio de frames-chave. As animações podem ser simples, de um estado ou até mesmo sequências complexas baseadas em tempo.

O que é um frame-chave?

Em softwares de animação, CSS e na maioria das outras ferramentas que permitem animar algo, os frames-chave são o mecanismo usado para atribuir estados de animação a carimbos de data/hora ao longo de uma linha do tempo.

Vamos usar "pulser" como contexto para isso. A animação inteira é executada por 1 segundo e em dois estados.

Há um ponto específico em que cada um desses estados de animação inicia e termina. Você os mapeia na linha do tempo com frames-chave.

@keyframes

Agora que você sabe o que é um frame-chave, esse conhecimento ajudará a entender como a regra CSS @keyframes funciona. Veja uma regra básica com dois estados.

@keyframes my-animation {
    from {
        transform: translateY(20px);
    }
    to {
        transform: translateY(0px);
    }
}

A primeira parte a ser observada é o custom ident (identificador personalizado) ou, em termos mais humanos, o nome da regra de frames-chave. O identificador dessa regra é my-animation. O identificador personalizado funciona como um nome de função. Que, como você aprendeu no módulo de funções, permite fazer 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. Usando o contexto do exemplo "pulser", 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 representar as alterações em cada um deles.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

As propriedades animation

Para usar seu @keyframes em uma regra CSS, defina várias propriedades de animação ou use a propriedade abreviada animation.

animation-duration

.my-element {
    animation-duration: 10s;
}

A propriedade animation-duration define a duração da linha do tempo @keyframes. Precisa ser 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 adicionar valores de tempo negativos.

animation-timing-function

Para ajudar a recriar o movimento natural na animação, você pode usar 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, se um valor for calculado além do valor definido em @keyframes, o elemento vai parecer saltar.

Há várias palavras-chave disponíveis como predefinições no CSS, que são usadas como o valor da animation-timing-function: linear, ease, ease-in, ease-out, ease-in-out.

.my-element {
    animation-timing-function: ease-in-out;
}

Os valores parecem se curvar com funções de easing porque ele é calculado usando uma curva de Bézier, que é usada para modelar a velocidade. Cada uma das palavras-chave da função de tempo, como ease, faz referência a uma curva de Bézier predefinida. No CSS, você pode definir uma curva 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 traçam cada parte da curva ao longo dos eixos X e Y.

Compreender as curvas de Bézier é complicado, e as ferramentas visuais, como este gerador de Lea Verou são muito úteis.

A função de easing steps

Às vezes, você pode querer um controle mais granular da animação e, em vez de se mover ao longo de uma curva, convém passar em intervalos. A função de easing steps() permite dividir a linha do tempo em intervalos iguais definidos.

.my-element {
    animation-timing-function: steps(10, end);
}

O primeiro argumento é o número de etapas. Se as etapas forem definidas como 10 e houver 10 frames-chave, cada frame-chave será reproduzido em sequência pelo período exato, sem transição entre estados. Se não houver frames-chave suficientes para as etapas, as etapas entre os frames-chave serão adicionadas, dependendo do segundo argumento.

O segundo argumento é a direção. Se estiver definido como end, que é o padrão, as etapas serão concluídas no final da linha do tempo. Se ele for 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. Por padrão, ele é 1, o que significa que, quando a animação chegar ao fim da linha do tempo, ela será interrompida no final. O número não pode ser negativo.

Você pode usar a palavra-chave infinite, que vai repetir a animação, que é como funciona a demonstração "pulser" do início desta lição.

animation-direction

.my-element {
    animation-direction: reverse;
}

É possível definir a direção da linha do tempo nos frames-chave com a animation-direction:

• normal: o valor padrão, que é encaminhado.
• reverse: executa a ação de trás na linha do tempo.
• alternate: a linha do tempo será executada em sequência para cada iteração de animação.
• alternate-reverse: o contrário de alternate.

animation-delay

.my-element {
    animation-delay: 5s;
}

A propriedade animation-Delay define quanto tempo esperar antes de iniciar a animação. Assim como a propriedade animation-duration, ela aceita um valor de tempo.

Diferentemente da propriedade animation-duration, é possível defini-lo como um valor negativo. Se você definir um valor negativo, a linha do tempo no @keyframes vai começar nesse ponto. Por exemplo, se a animação tiver 10 segundos e você definir animation-delay como -5s, ela 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 e, se você defini-lo 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 for concluída, os valores na sua linha do tempo serão descartados. Outras opções são:

• forwards: o último frame-chave será mantido, com base na direção da animação.
• backwards: o primeiro frame-chave será mantido, com base na direção da animação.
• both: segue as regras de forwards e backwards.

A abreviação animation

Em vez de definir todas as propriedades separadamente, você pode defini-las em uma abreviação animation, que permite definir as propriedades da 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 definir no sistema operacional que preferem reduzir o movimento durante a interação com aplicativos e sites. Essa preferência pode ser detectada usando a consulta de mídia prefers-reduced-motion.

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

Essa não é necessariamente uma preferência de animação, mas uma preferência para reduzir animações, especialmente as inesperadas. Saiba mais sobre essa preferência e o desempenho geral com este guia de animação.

Teste seu conhecimento

Teste seus conhecimentos sobre animações