Softonic

Generatore di animazioni CSS

Passaggio 1 / 2
Preimpostazione
Avanti

Scrivere @keyframes da zero è noioso: scegli le percentuali, indovini le proprietà, ricarichi, osservi, correggi. Questo generatore ti offre sei animazioni già pronte (dissolvenza, scorrimento verso l’alto, rimbalzo, rotazione, pulsazione e scossa) e ti lascia impostare nome, durata, easing, numero di iterazioni e direzione. Il risultato si riproduce in tempo reale e, quando sei soddisfatto, puoi copiare il blocco @keyframes generato e la proprietà abbreviata animation.

Come creare un'animazione CSS

  1. 1

    Scegli un preset

    Scegli una delle sei animazioni integrate: dissolvenza, scorrimento verso l'alto, rimbalzo, rotazione, pulsazione o scossa.

  2. 2

    Dai un nome all'animazione

    Assegna ai keyframes un identificatore CSS valido, come `cardIn` o `fadeIn`. Lo stesso nome viene usato nell'abbreviato `animation`.

  3. 3

    Imposta tempo e ripetizione

    Durata in secondi, easing (ease, ease-in, ease-out, ease-in-out, linear o spring), numero di iterazioni (1, 2, 3 o infinite) e direzione (normal, reverse, alternate o alternate-reverse).

  4. 4

    Copia il CSS

    La regola `@keyframes` generata e l'abbreviato `animation:`, pronti da incollare nel tuo foglio di stile.

Anatomia di un’animazione

@keyframes slide-in {
  0%   { transform: translateX(-100%); opacity: 0; }
  60%  { transform: translateX(10%);   opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; }
}

.card {
  animation: slide-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

Otto proprietà nell’abbreviato: animation-name duration timing-function delay iteration-count direction fill-mode play-state.

Scelte di easing

Il generatore offre sei funzioni di easing:

Easing cubic-bezier() Sensazione
linear n/a Velocità costante
ease-in 0.42, 0, 1, 1 Inizio lento, fine rapida
ease-out 0, 0, 0.58, 1 Inizio rapido, fine lenta
ease-in-out 0.42, 0, 0.58, 1 Lento-veloce-lento
ease (predef.) 0.25, 0.1, 0.25, 1 Predefinito delicato
spring 0.68, -0.55, 0.27, 1.55 Supera e si stabilizza

Anima le proprietà giuste

Il browser può animare qualsiasi proprietà, ma solo alcune scorrono fluidamente sulla GPU senza innescare layout o paint:

Economiche (solo composizione): transform, opacity, filter.

Costose (layout/paint): width, height, top, left, margin, padding, background-color.

Le animazioni a sessanta fotogrammi al secondo su width e top sono possibili su elementi piccoli, ma su mobile si bloccano se ne animi molte insieme. Per i movimenti complessi preferisci sempre transform: translate(...) a top / left, e transform: scale(...) a larghezza o altezza animate.

will-change: usalo con parsimonia

Chiedere al browser di pre-allocare un livello di composizione può migliorare la fluidità:

.card { will-change: transform; }

Ma consuma memoria. Applicalo poco prima che l’animazione scatti e rimuovilo a fine animazione. Impostare will-change: transform in modo permanente su molti elementi può fare più male che bene.

Movimento ridotto

Alcuni utenti sono sensibili al movimento e impostano le preferenze di sistema:

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }
}

Rispetta questa impostazione. Offri un cambiamento di stato immediato o una dissolvenza molto sottile come alternativa.

Domande frequenti

CSS per un movimento semplice, dichiarativo e una tantum. Web Animations API (element.animate()) per timing guidato da JavaScript, keyframes dinamici, pausa e controllo della riproduzione. Entrambe girano sul compositor; nessuna è intrinsecamente più veloce.

Quasi sempre perché stai animando una proprietà che innesca il layout (width, top, margin) invece di transform. Passa a translate() e scale() e il problema di solito scompare.

Sì, animation: a 1s, b 1s 1s, c 1s 2s; esegue tre animazioni in sequenza tramite ritardi scalati. Questo generatore produce una sola animazione, quindi aggiungi tu le voci extra nell’abbreviato. Per coreografie più complesse, usa la Web Animations API o una libreria come GSAP.

Fa assumere all’elemento lo stato from prima dell’inizio dell’animazione (durante il ritardo) e mantenere lo stato to dopo la fine. Senza both, a fine animazione l’elemento torna allo stile precedente. Il generatore tiene l’abbreviato minimo; aggiungi il fill mode tu stesso se ti serve.

Strumenti correlati

Riferimento Tabella ASCII

Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.

Generatore di lettere casuali

Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.

Riferimento ai caratteri HTML

Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.

Riferimento scorciatoie da tastiera

Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.

Trova nome colore

Trova il colore CSS standard con nome più vicino a un valore HEX, RGB o HSL usando la differenza CIEDE2000.

Generatore di Palette di Colori

Genera palette monocromatiche, analoghe, complementari, triadiche o tetradiche da un colore base HEX ed esporta variabili CSS pronte da copiare.