Animaties instellen
Slidde.co stelt je in staat om eenvoudig standaard CSS keyframe-animaties toe te passen op je web-elementen. Hier is een stapsgewijze handleiding om je op weg te helpen.
de Animatie-optie in de zijbalk
- Selecteer een Element: Klik op een willekeurig element op je pagina.
- Open de Animatie Modaal: In de rechter zijbalk, scroll naar beneden waar je de Animatie optie vindt. Klik erop om een modaal venster te openen.
Gebruik Vooraf ingestelde Animaties
- Begin met Presets: We raden aan om te beginnen met vooraf ingestelde animaties, die je kunt aanpassen aan je behoeften.
- Vind Meer Presets: Je kunt een lijst met vooraf ingestelde animaties vinden op Animate.css. Als je een specifieke animatie nodig hebt, laat het ons weten, en we kunnen deze aan de lijst toevoegen.
Animaties Aanpassen
De animatiemodale vereenvoudigt het proces van het instellen van CSS keyframe-animaties in een low-code interface, waardoor het toegankelijk is, zelfs als je niet bekend bent met coderen.
Keyframe-animaties zijn waar je de css-eigenschappen voor bepaalde percentages definieert. En de browser regelt de overgang voor je.
Bijvoorbeeld, als je keyframes hebt zoals deze met een duur van 4 seconden.
0% translateX(0)
50% translateX(-20px)
100% trasnlateX(0)
Het object zal 20px naar beneden bewegen gedurende 2 seconden, en vervolgens 20px omhoog terug naar zijn oorspronkelijke positie gedurende 2 seconden.
Als je problemen ondervindt of meer wilt leren over keyframe-animaties:
- Zoek Online: Google je specifieke vragen; er zijn veel voorbeelden en bronnen beschikbaar.
- CSS Keyframes Tutorial: Raadpleeg de officiële CSS keyframes gids op MDN voor uitgebreide informatie.
Kinderelementen Animeren
Je kunt de kinderen van het hoofdelement targeten door Targets in te stellen op &>*.
Verbluffende vertraging
Als je de vertraging wijzigt naar de volgende waarden, wordt een verbluffend effect toegepast.
targets: &>*
delay: anime.stagger(100) // verhoog de vertraging met 100ms voor elk element.
targets: &>*
delay: anime.stagger(100, {start: 500}) // vertraging begint bij 500ms en verhoogt dan met 100ms voor elk element.
Voor meer voorbeelden, kijk hier Staggering basics
Gebruik de css animation eigenschap
Een eenvoudige css-animatie is altijd beschikbaar voor alle elementen in Aangepaste stijlen. Maar je moet mogelijk Uitschakelen in canvas inschakelen voor die specifieke css-regel om eenvoudiger te kunnen bewerken in de editor.