Técnica de animação CSS baseada em tempo

Usando uma abordagem baseada em tempo para animações CSS

• Com o suporte a funções matemáticas no CSS, é possível reaplicar a técnica de animações CSS baseada em tempo
  • mod(), round(), funções trigonométricas, entre outras, são suportadas
  • Para ver as demos, pode ser necessário ativar uma flag de recurso experimental

Ideia principal

• Usando a API CSS Houdini, é possível definir uma variável personalizada para rastrear o tempo em milissegundos
  • Use a regra @property para definir a variável --t e definir o valor inicial como 0
  • Use a regra @keyframes para aumentar --t linearmente por 24 horas (86.400.000ms)
  • Outros valores baseados em --t mudam em conjunto para criar o efeito de animação
  • Use a função counter() para exibir o valor da variável --t

Controle de FPS

• Manter a atualização em 60 quadros por segundo (FPS) é suficiente para uma animação suave
• Se necessário, é possível controlar manualmente o FPS usando a função step()
  • Use a função step() na propriedade animation-timing-function para calcular o FPS desejado

Conversão de tempo

• O valor de --t aumenta continuamente em uma direção, então pode não ser ideal para algumas propriedades CSS
• Use min() para parar a animação quando atingir um valor específico
• Use mod() para reiniciar a animação
• Use sin() para criar um efeito de movimento de vai e vem

Easing customizado

• É possível criar funções de easing customizadas usando funções matemáticas e a variável --t
• É possível criar efeitos que são difíceis de alcançar com cubic-bezier()
• Exemplos: ease-out-cubic, ease-out-elastic, etc.

Experimentos com CSS Doodle

• Em expressões complexas, var() e calc() podem diminuir a legibilidade do código
• No css-doodle, a função @t pode ser usada para representar a variável --t
• As versões mais recentes do css-doodle permitem expressões matemáticas simples diretamente dentro de argumentos
• As funções @T e @TS também são fornecidas
  • @T representa o tempo desde o início do dia
  • @TS é um atalho de @t(/1000), rastreando o tempo em segundos
• É possível implementar exemplos como relógio e movimento de salto com css-doodle

Conclusão

• Essa abordagem de usar o tempo como variável é interessante
• Embora usar Keyframes possa ser mais intuitivo, em cenas de demo com muitas contas matemáticas e variáveis de entrada, usar o tempo como variável pode gerar resultados diversos

Opinião da GN⁺

• A técnica de animação CSS baseada em tempo não apenas amplia o que pode ser implementado com CSS, como também deve ampliar a possibilidade de uso combinado com outras tecnologias como shaders e WebGL
• Usar ferramentas como CSS Houdini e CSS Doodle pode permitir expressões mais flexíveis e diversas
• Contudo, haverá aspectos a considerar ao aplicar em projetos reais, como compatibilidade entre navegadores e questões de desempenho. Vale comparar bem os pontos fortes e fracos do formato Keyframe e usá-lo seletivamente
• Também é preciso analisar os prós e contras em comparação com bibliotecas de animação profissionais como GSAP. Seria positivo explorar maneiras de usá-las de forma complementar
• Espera-se que mais exemplos e casos de uso de animações CSS baseadas em tempo sejam compartilhados para que desenvolvedores front-end possam aplicá-las com mais facilidade

[GN⁺]

Comentário do Hacker News

• Usar um animation-delay negativo em CSS permite controlar o andamento da animação com JavaScript. Por exemplo, ao definir animation-delay: -1500ms, ela começa imediatamente, mas avança para o ponto de 1,5 segundos. Ao manipular esse valor via JavaScript, dá para fazer scrub das animações CSS e tornar todas as animações compatíveis com o loop de tick cálculo-atualização-renderização no estilo de game engine.

• Assim que você passa do easing simples ou de keyframes de apenas um ou dois canais, encontra rapidamente os limites dessa abordagem. O Theatre.js é útil quando você precisa de uma animação mais refinada, pois ele é composto por uma UI de estúdio com uma timeline para editar keyframes e curvas de Bézier, além de um runtime que interpola valores em relação à timeline ao importar esses keyframes.

• Este post usa @property CSS customizado com taxa de suporte de 88% dos navegadores. Um ponto de atenção é que a forma de definir o valor inicial varia entre navegadores. O Chrome usa o valor inicial quando a propriedade está indefinida ou inválida, enquanto o Firefox o faz apenas quando está indefinida. Isso provavelmente não afetará a maioria dos projetos, mas pode ser necessário definir o valor padrão do Firefox via JavaScript para resolver inconsistências de implementação entre navegadores.

• O CSS possui funções matemáticas suficientes, como mod(), round() e trigonometria. CSS não consegue iniciar um timer como o JavaScript, mas hoje em dia é possível definir variáveis personalizadas com a API CSS Houdini para rastrear o tempo em milissegundos. Porém, se já existe JavaScript, por que precisar de tudo isso? A camada de renderização não deveria se concentrar apenas nas primitivas de desenho? Por que queremos adicionar mais camadas de alto nível?

• O relógio ficou muito estiloso. Texto muito bem escrito. O Chrome ainda não lançou suporte de CSS para mod(), então, sem usar uma release de preview, a maior parte dos exemplos da página não fica animada.

• Se você quer animações CSS suaves em todos os navegadores sem precisar controlar os ticks, o método FLIP é útil.

• Quis fazer algo como 'box breathing', personalizando as etapas inspirar-pausar-expirar-pausar para se ajustar ao próprio corpo e obter o efeito desejado, mas não encontrei como fazer algo assim sem JS ou complexidade absurda, se não pelo jeito dessa página. Esta página tem demonstrações realmente criativas!

• Curiosamente, a demo anterior ao mod() funciona, mas mod() e sin() não fazem nada no Chrome mais recente do Android.

• A animação no rodapé da página é muito impressionante. Parece mais com um do que um .

• É muito impressionante, mas de certa forma parece que chegamos perto do que dá para fazer com Flash há algumas décadas. Não espero que o Flash volte, mas seria legal ter ferramentas mais amigáveis para criar animações em CSS.