Animation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

Experimental: Esta é uma tecnologia experimental
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

A interface Animation da Web Animations API representa um único player de animação e fornece controles e uma linha do tempo (timeline) para um nó de animação ou recurso.

Construtor

Animation()

Cria uma nova instância do objeto Animation.

Propriedades

Animation.currentTime

O valor do tempo atual da animação, em milissegundos, esteja ela executando ou pausada. Se a animação não tem uma timeline, está inativa ou ainda não foi executada, este valor é null.

Animation.effect

Obtém e define o KeyframeEffect associado a essa animação.

Animation.finished Somente leitura

Retorna a Primise de finalização atual para essa animação.

Animation.id

Obtém e define a String usada para identificar a animação.

Animation.oncancel

Obtém e define o manipulador para o evento cancel.

Animation.onfinish

Obtém e define o manipulador para o evento finish.

Animation.playState Somente leitura

Retorna um valor enumerado descrevendo o estado de execução de uma animação.

Animation.playbackRate

Obtém ou define a taxa de execução da animação.

Animation.ready Somente leitura

Retorna a promessa atual para quando essa animação estiver pronta.

Animation.startTime

Obtém ou define o tempo agendado quando a execução de uma animação deve começar.

Animation.timeline

Obtém ou define a timeline associada a essa animação.

Métodos

Animation.cancel()

Limpa todos os keyframeEffects causados por essa animação e aborta sua execução.

Animation.finish()

Vai até um dos extremos dessa animação, dependendo se ela está executando ou retornando.

Animation.pause()

Suspende a execução de uma animação.

Animation.play()

Inicia ou continua a execução de uma animação ou a recomeça se ela tiver terminado anteriormente.

Animation.reverse()

Move a animação ao contrário, parando no início da animação.

Especificações

Specification
Web Animations
# the-animation-interface

Compatibilidade com navegadores