LocalToolsRaccolta di strumenti browser offline

Categoria: Sviluppo

Generatore di CSS keyframes

Idea internaManca uno strumento?

Scegli una preimpostazione di animazione e copia il blocco @keyframes

Scegli una preimpostazione di dissolvenza, scorrimento, rimbalzo, pulsazione o rotazione, imposta durata, funzione di temporizzazione, numero di iterazioni e direzione, e copia il blocco @keyframes completo più l'abbreviazione animation che lo usa, con un'anteprima dal vivo.

Output
@keyframes localtools-preview {
  from {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-24px);
  }

  60% {
    transform: translateY(0);
  }

  80% {
    transform: translateY(-12px);
  }

  to {
    transform: translateY(0);
  }
}

.element {
  animation: localtools-preview 1.2s ease-in-out infinite normal;
}

L'anteprima riparte ogni volta che cambi la preimpostazione, usando esattamente il CSS mostrato sotto.

Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.

A cosa serve

Scrivere a mano un blocco @keyframes significa nominare le tappe percentuali e ottenere i valori delle proprietà a ciascuna in modo che si interpolino come previsto, il che è facile da sbagliare in modo sottile per qualcosa come un rimbalzo con più tappe. Questo strumento include una manciata di forme di animazione comuni come elenchi di tappe già pronti, e ti permette di regolare i controlli di temporizzazione che non cambiano i keyframes stessi, così l'anteprima corrisponde sempre esattamente al blocco CSS sottostante.

Come si usa

  1. Scegli una preimpostazione di animazione.
  2. Imposta durata, funzione di temporizzazione, numero di iterazioni e direzione.
  3. Copia il blocco @keyframes e l'abbreviazione animation sotto di esso.

Privacy

Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.

Domande frequenti

Perché l'anteprima riparte quando cambio la preimpostazione?
Cambiare preimpostazione sostituisce le tappe @keyframes sottostanti, quindi l'elemento di anteprima viene rimontato per garantire che l'animazione in corso corrisponda a quella appena generata invece di terminare una obsoleta.
Cosa fa "infinite" come numero di iterazioni?
Ripete l'animazione all'infinito, che è ciò che usa l'anteprima per impostazione predefinita; imposta invece un numero se vuoi che venga riprodotta un numero fisso di volte e poi si fermi.
Viene inviato qualcosa a un server?
No. Il blocco @keyframes e l'abbreviazione animation sono costruiti nella pagina a partire dalla preimpostazione e dalle scelte di temporizzazione che fai, ed è per questo che l'anteprima si aggiorna all'istante.

Torna a tutti gli strumenti