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
- Seleziona un Elemento: Clicca su qualsiasi elemento della tua pagina.
- Apri il Modale Animazione: Nella barra laterale destra, clicca sul pulsante della scheda Animazioni, troverai l'opzione Animazione. Cliccala per aprire una finestra modale.
- Inizia con i Predefiniti: Ti consigliamo di iniziare con le animazioni predefinite, che puoi successivamente modificare per adattarle alle tue esigenze. Puoi cliccare i pulsanti predefiniti per sostituire con un predefinito. Se clicchi l'icona più nel pulsante, il predefinito verrà aggiunto all'animazione corrente.
Personalizzare le Animazioni
Il modale delle animazioni semplifica il processo di impostazione delle animazioni di keyframe CSS in un'interfaccia a basso codice, 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 CSS keyframes su MDN per informazioni complete.
Innesco
Questo campo controlla quando l'animazione viene riprodotta.
- Elemento mostrato: Questo è quello predefinito. L'animazione verrà attivata quando l'elemento viene visualizzato a schermo o quando la sezione contenente viene mostrata Sezione hash
- Elemento mostrato (ripeti ogni volta): Come sopra, tranne che l'animazione verrà ripetuta ogni volta che l'elemento viene mostrato.
- Pagina caricata: L'animazione verrà attivata quando la pagina viene caricata.
Obiettivo(i)
Di solito non è necessario impostarlo. Il valore predefinito è & che significa l'elemento radice.
Tuttavia, ci sono alcuni casi in cui sarà necessario impostarlo.
Per animare l'elemento Sfondo avanzato, puoi impostare Obiettivo(i) su Primo elemento figlio, poiché l'elemento Sfondo avanzato sarà sempre il primo figlio dell'elemento radice.
Per applicare un ritardo a cascata a tutti gli elementi figli. Continua a leggere la sezione Delay & staggering delay per maggiori dettagli.
Delay & staggering delay
Se imposti Ritardo a 1000ms, l'animazione verrà eseguita dopo un'attesa di 1000ms.
Se imposti Intervallo a 50ms e imposti i target su Tutti gli elementi figli diretti. L'animazione verrà applicata a ciascuno degli elementi figli diretti, e attenderà
- primo elemento, 1000ms,
- secondo elemento, 1050ms,
- terzo elemento, 1100ms,
- ...
Text staggering
Questo funziona per un componente Testo.
Se imposti Intervallo e imposti i target su Tutte le lettere. L'effetto a cascata verrà applicato a ciascuna lettera.
Usa la proprietà css animation
Una semplice animazione css è sempre disponibile per tutti gli elementi in CSS. Ma potresti dover attivare Disable in canvas per quella specifica regola css per consentire una modifica più semplice nell'editor.