Impostare le animazioni

Slidde.co ti consente di applicare facilmente animazioni standard di keyframe CSS ai tuoi elementi web. Ecco una guida passo-passo per aiutarti a iniziare.

l'Opzione Animazione nella barra laterale

1. Seleziona un Elemento: Clicca su qualsiasi elemento della tua pagina.
2. Apri il Modale Animazione: Nella barra laterale destra, scorri fino in fondo dove troverai l'opzione Animazione. Cliccala per aprire una finestra modale.

Usa Animazioni Preimpostate

• Inizia con le Preimpostazioni: Ti consigliamo di iniziare con le animazioni preimpostate, che puoi modificare per adattarle alle tue esigenze.
• Trova Altre Preimpostazioni: Puoi trovare un elenco di animazioni preimpostate su Animate.css. Se hai bisogno di un'animazione specifica, faccelo sapere e possiamo aggiungerla all'elenco.

Personalizza le Animazioni

Il modale delle animazioni semplifica il processo di impostazione delle animazioni di keyframe CSS in un'interfaccia low-code, rendendolo accessibile anche se non hai familiarità con la programmazione.

Le animazioni di keyframe sono dove definisci le proprietà CSS per determinate percentuali. E il browser gestisce la transizione per te.

Ad esempio, se hai dei keyframe come questo con una durata di 4 secondi.

0% translateX(0)

50% translateX(-20px)

100% trasnlateX(0)

L'oggetto si muoverà di 20px verso il basso per 2 secondi, quindi si muoverà di 20px verso l'alto tornando alla sua posizione originale per 2 secondi.

Se incontri problemi o vuoi saperne di più sulle animazioni di keyframe:

• Cerca Online: Cerca su Google le tue domande specifiche; ci sono molti esempi e risorse disponibili.
• Tutorial sui Keyframe CSS: Consulta la guida ufficiale sui keyframe CSS su MDN per informazioni complete.

Animare gli elementi figli

Puoi mirare ai figli dell'elemento radice impostando Targets su &>*.

Ritardo scaglionato

Se cambi il ritardo ai seguenti valori, verrà applicato un effetto scaglionato.

targets: &>*
delay: anime.stagger(100) // aumenta il ritardo di 100ms per ciascun elemento.

targets: &>*
delay: anime.stagger(100, {start: 500}) // il ritardo inizia a 500ms poi aumenta di 100ms per ciascun elemento.

Per ulteriori esempi, dai un'occhiata qui Nozioni di base sullo scaglionamento

Utilizzare la proprietà animation di css

Una semplice animazione css è sempre disponibile per tutti gli elementi in Stili personalizzati. Ma potresti dover attivare Disabilita in canvas per quella specifica regola css per consentire una modifica più semplice nell'editor.