Gerador de Animação CSS Orientada por Scroll
Gere uma animação CSS orientada por scroll nativa — um bloco @keyframes conectado a animation-timeline: view() ou scroll() em vez de uma duração fixa — a partir de presets prontos para usar (fade in, slide in, scale up, rotate in, reveal clip-path) com intervalo de animação configurável.
Entrada
view() anima o elemento conforme entra na viewport; scroll() o vincula ao progresso de scroll da página.
Intervalos nomeados (entry/cover) funcionam com view(); timelines scroll() entendem apenas porcentagens simples.
Saída
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-scroll-driven-animation-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"animationType": "fadeIn",
"timelineType": "view",
"animationRange": "entry 0% cover 100%"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-scroll-driven-animation-generator` tool (CSS Scroll-Driven Animation Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-scroll-driven-animation-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Animação CSS Orientada por Scroll — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
Uma animação orientada por scroll vincula o progresso da animação de um elemento à posição de scroll em vez do tempo de relógio, usando a propriedade CSS nativa animation-timeline. Configure como view() e o elemento desaparece, desliza, aumenta de escala, rotaciona ou se revela ao entrar na viewport; configure como scroll() e a animação acompanha o progresso de scroll da página (ou de um contêiner de scroll) diretamente — uma barra de progresso vinculada ao scroll, camada de parallax ou efeito de revelação sem JavaScript, orientado inteiramente pelo compositor.
Este gerador constrói as duas metades para você: um bloco @keyframes com as etapas from/to corretas para um preset escolhido e a regra acompanhante que a conecta com animation-timeline e animation-range em vez de uma animation-duration fixa. Copie ambas para sua folha de estilo e substitua .scroll-animate pelo seu próprio seletor.
Suporte do navegador
Animações orientadas por scroll são um recurso CSS relativamente novo. No momento da escrita, Chrome e Edge (115+) suportam animation-timeline: scroll() e view() nativamente. Firefox e Safari ainda não oferecem suporte por padrão, então trate isto como melhoramento progressivo: combine com um bloco @supports not (animation-timeline: view()) que define o estado final (to) do elemento diretamente, para que navegadores não suportados ainda mostrem um resultado sensato e estático em vez de um elemento travado invisível ou fora da tela. Sempre verifique caniuse.com/css-scroll-timeline para o estado atual antes de contar com isso em produção.
Como usar
- Escolha um preset — Fade In, Slide In (da esquerda/direita/baixo), Scale Up, Rotate In ou Reveal Clip Path. Cada um é um par pronto para usar de
from/tode etapasopacity/transform/clip-path. - Escolha uma timeline —
view()anima o elemento conforme ele desce e passa pela viewport (melhor para efeitos "revelar ao rolar");scroll()vincula a animação ao progresso de scroll geral do contêiner de scroll mais próximo (melhor para barras de progresso e efeitos de estilo parallax). - Escolha um intervalo de animação — controla qual porção da timeline a animação é reproduzida. Intervalos nomeados como
entryecoverdescrevem fases de um elemento cruzando a viewport e são destinados aview(); porcentagens simples como0% 100%funcionam com qualquer tipo de timeline. - Copie o CSS gerado e cole-o em sua folha de estilo, ou faça download como um arquivo
.css.
FAQ
Por que o seletor é .scroll-animate?
É um espaço reservado para que o CSS esteja pronto para colar — renomeie-o para corresponder ao elemento que deseja animar.
O que animation-range realmente controla?
Ele mapeia uma porção da timeline de scroll para o progresso de 0%–100% da animação. entry 0% cover 100%, por exemplo, inicia a animação no momento em que o elemento começa a entrar na viewport e termina quando estiver cobrindo completamente (scrollado past) essa fase de entrada.
Por que não há animation-duration?
Animações orientadas por scroll não são executadas em um relógio — sua "duração" é quanto da faixa de scroll você designa a elas via animation-range. Definir uma duração explícita não é necessário (e é ignorado pelo mecanismo de timeline).
O que acontece em navegadores que ainda não suportam isso?
Sem suporte, animation-timeline é simplesmente ignorado, então o elemento permanece em seu estado padrão (from) — geralmente invisível ou deslocado. Adicione um bloco @supports not (animation-timeline: view()) com os estilos finais do elemento como fallback estático.
Posso animar mais do que opacity e transform?
Sim — qualquer propriedade CSS animável funciona dentro de @keyframes, incluindo clip-path como usado pelo preset Reveal aqui. Transform e opacity são favoritos porque são amigáveis ao compositor e mantêm suavidade durante o scroll.
Privacidade
Tudo é executado localmente no seu navegador — suas configurações nunca deixam seu dispositivo e nenhum CSS é enviado a um servidor para ser gerado.