Animated Map Arcs

Uma Terra 3D giratória com marcadores ou arcos fica no layout.

Adicione um globo 3D ("3D Globe", também chamado interactive globe) em [onde].
Um globo com alguns marcadores na superfície deve girar lenta e constantemente em torno do eixo, com os marcadores girando junto: calmo e contínuo.
Mantenha-o decorativo com uma alternativa em texto para as informações que mostra, pause quando estiver fora da tela e pare a rotação se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um pulso luminoso percorre uma linha que liga dois elementos.

Adicione um efeito "Animated Beam" (também chamado connecting beam) em [onde].
Um pulso luminoso curto deve percorrer a linha que liga dois elementos, avançando de forma constante de uma ponta à outra e recomeçando: suave e calmo.
Mantenha a linha de conexão sempre visível, e deixe o pulso parado se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um elemento percorre um caminho curvo personalizado e pode girar para acompanhá-lo.

Adicione uma animação "Motion Path" (também chamada animate along path) em [onde].
Um elemento pequeno deve percorrer uma rota curva personalizada em ritmo lento e constante, girando para ficar de frente para a direção em que se move.
Use uma rota fechada para o loop se repetir sem saltos, e faça a rota se ajustar ao contêiner em vez de ficar com tamanho fixo.

As barras sobem da altura zero até seus valores.

Adicione um gráfico de barras animado (Bar Chart Grow) em [onde], também chamado animated bar chart ou bar chart entrance.
Cada barra deve subir da linha de base até o seu valor, uma após a outra num escalonamento rápido, desacelerando suavemente ao se acomodar.
Reproduza só uma vez quando o gráfico entrar na tela e mostre o gráfico pronto de imediato se o usuário preferir movimento reduzido (prefers-reduced-motion).

Barras horizontais trocam de posição ao longo do tempo conforme os valores mudam.

Adicione um "Bar Chart Race" (também chamado racing bar chart) em [onde].
As barras horizontais devem crescer e encolher conforme os valores mudam ao longo do tempo e deslizar suavemente umas pelas outras sempre que a posição mudar, cada uma mantendo seu rótulo.
Mova as barras com transformações em vez de reordenar o markup, para as trocas deslizarem em vez de pular, e dê aos usuários uma forma de pausar.

Os elementos do gráfico passam suavemente dos valores antigos para os novos quando os dados mudam ou o conjunto de dados é alternado.

Adicione um "Chart Data Transition" (também chamado chart update animation) em [onde].
Quando os dados mudarem, todas as barras devem deslizar ao mesmo tempo do valor antigo para o novo, suaves e sem pressa, em vez de serem redesenhadas a partir do zero.
Comece cada atualização a partir dos valores que estão na tela para uma segunda mudança rápida não pular, e aplique os novos valores na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).