Keyframe e animation-timeline | CSS

• Keyframe e animation-timeline | CSS

info

Artigo: https://blog.openreplay.com/create-scroll-animations-with-just-css/

animation-timeline

A propriedade animation-timeline permite controlar qual linha do tempo (“timeline”) vai guiar a progressão de uma animação CSS — não necessariamente o tempo de relógio padrão do documento. (MDN Web Docs)

Sintaxe

animation-timeline: auto | none | <dashed-ident> | scroll() | view();

• auto (padrão): usa a timeline padrão do documento (ou seja, baseada no tempo desde o carregamento) (MDN Web Docs)
• none: a animação não está associada a nenhuma timeline (MDN Web Docs)
• <dashed-ident>: identifica uma timeline nomeada que foi previamente declarada via scroll-timeline-name ou view-timeline-name (MDN Web Docs)
• scroll(): timeline anônima baseada no progresso de rolagem (scroll) de um contêiner (scroller) (MDN Web Docs)
• view(): timeline anônima baseada na visibilidade do elemento dentro de seu contêiner de rolagem (quando entra/sai da viewport) (MDN Web Docs)

Exemplos

Timeline nomeada de scroll

<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>

#container {
  height: 300px;
  overflow-y: auto;
  scroll-timeline-name: --square-timeline;
  position: relative;
}

#square {
  width: 100px;
  height: 100px;
  background: deeppink;
  animation-name: rotate;
  animation-duration: 1ms; /* necessário no Firefox */
  animation-direction: alternate;
  animation-timeline: --square-timeline;
  position: absolute;
  bottom: 0;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#stretcher {
  height: 600px;
}

Nesse caso, o progresso da rolagem do #container define o progresso da animação rotate aplicada ao #square. (MDN Web Docs)

Timeline anônima de scroll

.scroll-container {
  overflow-y: auto;
}

.scroll-container img {
  animation-name: grow;
  animation-duration: 1ms; /* necessário no Firefox */
  animation-timeline: scroll();  
}

@keyframes grow {
  from { transform: scale(0.5); }
  to { transform: scale(2); }
}

Aqui scroll() indica ao CSS que a animação deve ser ligada ao progresso de rolagem de um ancestral que permita scroll. (CSS-Tricks)

---

@keyframes (e animações CSS padrão)

Antes de usar animation-timeline, é útil revisar como funcionam as animações CSS tradicionais com @keyframes. (MDN Web Docs)

Conceito

• O @keyframes define os “quadros-chave” (keyframes) de uma animação, ou seja, estados específicos ao longo da linha do tempo (ex: 0%, 50%, 100%) (MDN Web Docs)
• Entre esses pontos, o navegador interpola os valores CSS para criar transições suaves (CSS-Tricks)
• Os percentuais 0% e 100% podem ser escritos como from e to respectivamente (MDN Web Docs)

Propriedades de animação (subpropriedades de animation)

Quando aplicamos @keyframes a um elemento, usamos propriedades como:

• animation-name (ou via shorthand animation)
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation-play-state
• (e também animation-timeline, quando aplicável) (MDN Web Docs)

Exemplo básico

<div class="box"></div>

@keyframes fade-in-out {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation-name: fade-in-out;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

Esse exemplo faz um elemento “piscar” (sumir e aparecer continuamente). (gcdi.commons.gc.cuny.edu)

Exemplo com múltiplos keyframes

@keyframes move-color {
  0% {
    left: 0px;
    background-color: red;
  }
  25% {
    left: 200px;
    background-color: orange;
  }
  50% {
    left: 200px;
    background-color: yellow;
  }
  75% {
    left: 0px;
    background-color: green;
  }
  100% {
    left: 0px;
    background-color: blue;
  }
}

.element {
  position: relative;
  animation: move-color 4s infinite;
}

Aqui o elemento muda de cor e de posição ao longo dos pontos definidos. (W3Schools)

Outras observações

• Dentro de @keyframes, você pode usar animation-timing-function para definir a curva de tempo apenas para a transição até o próximo keyframe. (CSS-Tricks)
• Propriedades CSS animáveis devem ser compatíveis — algumas propriedades ou variáveis CSS personalizadas não são interpoláveis por padrão (ex: variáveis customizadas sem declaração adequada via @property) (CSS-Tricks)
• Você pode usar múltiplas animações num mesmo elemento (separadas por vírgulas) (MDN Web Docs)

---

Se quiser, posso montar uma versão em português mais completa (como referência para uso) ou fornecer exemplos práticos mais avançados com animation-timeline. Você quer isso?