Generatore di animazioni di ingresso CSS

Generatore di animazioni di ingresso CSS: a cosa serve

Scegli l’effetto, la durata, la curva (con l’ease-out forte consigliata), la distanza e il ritardo a cascata tra gli elementi. L’anteprima mostra sei blocchi che entrano e si può ripetere.

Il codice usa transizioni di opacity e transform, un IntersectionObserver per animare quando l’elemento compare nello schermo e una versione senza spostamento per chi preferisce meno movimento. Senza JavaScript, il contenuto compare normalmente.

Come si usa

1. Scegli l’effetto, la durata e la curva.
2. Regola la distanza e la cascata e guarda l’anteprima.
3. Copia il CSS e lo script e usa la classe anima.

Quando usarlo

• Sezioni di landing page che compaiono allo scorrimento.
• Schede di servizi e prodotti a cascata.
• Dare un tocco finale ai siti aziendali.

Domande frequenti

Quale durata usare?

Per gli elementi dell’interfaccia, da 150 a 300 millisecondi. Nelle sezioni delle pagine di presentazione, fino a circa 600 ms sembra ancora naturale. Animazioni troppo lunghe fanno sembrare il sito lento.

Quale curva scegliere?

Per gli elementi che entrano nello schermo, usa una curva che rallenta alla fine (ease-out forte, come cubic-bezier(0.23, 1, 0.32, 1)): il movimento parte veloce e si assesta dolcemente. Evita ease-in per gli ingressi, perché ritarda proprio l’inizio.

E per chi non ama il movimento?

Il codice rispetta l’impostazione di riduzione del movimento del sistema (prefers-reduced-motion): gli elementi compaiono solo con una breve dissolvenza, senza spostamento.

Come funziona la modalità allo scorrimento?

Un IntersectionObserver aggiunge la classe visivel quando l’elemento entra nello schermo. Senza JavaScript, gli elementi compaiono normalmente, senza animazione.

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili