Ställa in animationer

Slidde.co låter dig enkelt tillämpa standard CSS-nyckelbildsanimationer på dina webbelement. Här är en steg-för-steg-guide för att hjälpa dig komma igång.

alternativet Animation i sidofältet

1. Välj ett element: Klicka på valfritt element på din sida.
2. Öppna Animation-modulen: I det högra sidofältet, klicka på Animationer-fliken, där hittar du Animation-alternativet. Klicka på det för att öppna ett modalfönster.
3. Börja med förinställningar: Vi rekommenderar att börja med förinställda animationer, som du senare kan ändra för att passa dina behov. Du kan klicka på förinställningsknapparna för att ersätta med en förinställning. Om du klickar på plusikonen i knappen, kommer förinställningen att läggas till den nuvarande animationen.

Anpassa animationer

Animationsmodulen förenklar processen att ställa in CSS-nyckelbildsanimationer till ett lågt kodgränssnitt, vilket gör det tillgängligt även om du inte är bekant med kodning.

Nyckelbildsanimationer är där du definierar CSS-egenskaper för vissa procentandelar. Och webbläsaren hanterar övergången åt dig.

Till exempel om du har nyckelbilder som denna med en varaktighet på 4 sekunder.

0% translateX(0)

50% translateX(-20px)

100% trasnlateX(0)

Objektet kommer att röra sig 20px mot botten i 2 sekunder, sedan röra sig 20px upp tillbaka till sin ursprungliga position i 2 sekunder.

Om du stöter på några problem eller vill lära dig mer om nyckelbildsanimationer:

• Sök online: Googla dina specifika frågor; det finns gott om exempel och resurser tillgängliga.
• CSS Keyframes Tutorial: Hänvisa till den officiella CSS keyframes guide på MDN för omfattande information.

Utlösare

Detta fält styr när animationen spelas upp.

• Element visas: Detta är standardinställningen. Animeringen kommer att utlösas när elementet antingen rullas in i vyn eller när den innehållande sektionen visas Hash-sektion
• Element visas (spela upp varje gång): Samma som ovan, förutom att animeringen kommer att spelas upp varje gång elementet visas.
• Sida laddad: Animeringen kommer att utlösas när sidan laddas.

Mål

Vanligtvis behöver du inte ställa in detta. Standardvärdet är & vilket betyder rot-elementet.

Men det finns vissa fall där du behöver ställa in det.

• För att animera Avancerad bakgrund-elementet kan du ställa in Mål till Första barnelement, eftersom Avancerad bakgrund-elementet alltid kommer att vara det första barnet till rot-elementet.

• För att tillämpa en fördröjning på alla barn-element. Läs vidare i avsnittet Delay & staggering delay för mer information.

Delay & staggering delay

Om du ställer in Fördröjning till 1000ms, kommer animeringen att spelas efter att ha väntat i 1000ms.

Om du ställer in Förskjutning till 50ms och ställer in mål till Alla direkta barnelement. Animeringen kommer att tillämpas på var och en av de direkta barn-elementen, och vänta

• första elementet, 1000ms,
• andra elementet, 1050ms,
• tredje elementet, 1100ms,
• ...

Text staggering

Detta fungerar för en Text-komponent.

Om du ställer in Förskjutning och ställer in mål till Alla bokstäver. Den stegvisa effekten kommer att tillämpas på varje bokstav.

Använd css animation-egenskap

En enkel css-animering är alltid tillgänglig för alla element i CSS. Men du kan behöva slå på Disable in canvas för den specifika css-regeln för att underlätta redigering i redigeraren.