Vai al contenuto principale
Uddatak

Generatore di animazioni CSS keyframe

Scegli il tipo di animazione tra 12 stili pronti (dissolvenza in entrata e uscita, scorrimento da quattro direzioni, ingrandimento e rimpicciolimento, rimbalzo, rotazione in entrata, capovolgimento orizzontale e verticale), poi regola durata, ritardo, curva di temporizzazione e numero di ripetizioni, con anteprima live immediata e un pulsante per riavviare l'animazione. Puoi copiare il codice @keyframes completo con la regola dell'animazione già pronta da usare direttamente. Tutta la generazione avviene nel tuo browser, senza caricare alcun dato su alcun server.

Strumenti di design e CSS Funziona interamente nel tuo browser

Il codice viene generato interamente nel tuo browser — non viene mai inviato nulla a un server.

Codice CSS

@keyframes uddatakAnim {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.animated-box {
  animation: uddatakAnim 800ms ease-out 0ms 1;
}

Domande frequenti

Sì, la proprietà @keyframes e animation è supportata in tutti i browser moderni senza bisogno di prefissi speciali.

Continua con

Completamente locale

Generatore di curve cubic-bezier

Trascina due punti per progettare visivamente una curva di accelerazione personalizzata e copia il codice cubic-bezier.

Strumenti di design e CSSApri strumento
Completamente locale

Generatore di gradiente CSS

Crea visivamente un gradiente CSS lineare o radiale e copia il codice pronto all'uso.

Strumenti di design e CSSApri strumento
Completamente locale

Generatore di clip-path CSS

Scegli una forma predefinita (cerchio, triangolo, stella, fumetto...) e copia il codice clip-path.

Strumenti di design e CSSApri strumento

Strumenti correlati

Completamente locale

Generatore di armonia palette colori

Scegli un colore base e ottieni una palette di colori armoniosa (complementare, analoga, triadica, tetradica, monocromatica).

Strumenti di design e CSSApri strumento
Completamente locale

Generatore di gradiente mesh

Crea uno sfondo con gradienti di colore morbidi e multipunto (mesh gradient) con un clic, e copia il codice CSS pronto all'uso.

Strumenti di design e CSSApri strumento
Completamente locale

Verificatore di contrasto colore

Verifica se una coppia di colori testo/sfondo rispetta gli standard di contrasto per l'accessibilità WCAG.

Strumenti di design e CSSApri strumento
Completamente locale

Generatore di gradiente CSS

Crea visivamente un gradiente CSS lineare o radiale e copia il codice pronto all'uso.

Strumenti di design e CSSApri strumento
Completamente locale

Generatore di box-shadow CSS

Progetta visivamente un'ombra box-shadow con cursori interattivi e copia il codice generato.

Strumenti di design e CSSApri strumento

Vuoi provare Uddatak?

Sfoglia la libreria completa di strumenti e inizia subito a usare ciò di cui hai bisogno — gratis, senza registrazione.

Vedi tutti gli strumenti