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.

Animationsalternativet 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, scrolla till botten där du hittar alternativet Animation. Klicka på det för att öppna ett modulärt fönster.

Använd förinställda animationer

• Börja med förinställningar: Vi rekommenderar att börja med förinställda animationer, som du kan modifiera för att passa dina behov.
• Hitta fler förinställningar: Du kan hitta en lista över förinställda animationer på Animate.css. Om du behöver en specifik animation, låt oss veta så kan vi lägga till den i listan.

Anpassa animationer

Animationsmodulen förenklar processen att ställa in CSS-nyckelbildsanimationer till ett lågkodgrä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 dessa med en varaktighet på 4 sekunder.

0% translateX(0)

50% translateX(-20px)

100% trasnlateX(0)

Objektet kommer att röra sig 20px nedåt 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.

Animering av barnelement

Du kan rikta in dig på rotens barnelement genom att ställa in Targets till &>*.

Fördröjning med förskjutning

Om du ändrar fördröjningen till följande värden kommer en förskjutningseffekt att tillämpas.

targets: &>*
delay: anime.stagger(100) // öka fördröjningen med 100ms för varje element.

targets: &>*
delay: anime.stagger(100, {start: 500}) // fördröjningen börjar vid 500ms och ökar sedan med 100ms för varje element.

För fler exempel, vänligen titta här Grundläggande förskjutning

Använd css animation-egenskapen

En enkel css-animation är alltid tillgänglig för alla element i Anpassade stilar. Men du kan behöva aktivera Disable in canvas för den specifika css-regeln för att möjliggöra enklare redigering i redigeraren.