Pause & Loop CSS-animaties met WAIT! bezielen

Er is veel dat je kunt doen met pure CSS-animaties, maar een animatie pauzeren en herhalen is niet mogelijk met de huidige W3-specificatie.

Maar met een gratis tool zoals WACHT! bezielen je kunt het eigenlijk maak vanuit het niets lusanimaties met aangepaste vertragingen tussen elke lus. Dit lijkt misschien een alledaagse taak, maar het lost een pijnpunt op voor veel ontwikkelaars.

Er moet worden opgemerkt dat er een CSS-eigenschap is genaamd animatie-delay welke vertraagt ​​de begin van een CSS-animatie. Hoe dan ook heeft geen invloed op een herhalende animatie omdat het alleen het startpunt vertraagt.

WACHT! bezielen auto-berekent hoeveel pauzes er in aangepaste animatiesleutelframes moeten worden geplaatst maak de exacte pauzeduur aan je hebt nodig tussen lussen. Dit kan met de hand worden gedaan, maar het is extreem geconvolueerd, om maar te zwijgen van super irritant.

Deze webapp kan werken met elke CSS3-animatiefunctie, inclusief rotaties en transformaties. U schrijft geen nieuwe CSS-eigenschappen, maar eerder bouwen bovenop de functie hoofdframes maken pauzeert op basis van percentages (van 0% tot 100%) in de animatie.

Bekijk de startpagina om te zien een paar voorbeelden in actie. Het is vrij duidelijk wat je kunt doen en de broncode is daar om te kopiëren / plakken in je eigen werk.

Let op dit is geen volwaardige bibliotheek. Het is een generator die maakt uw CSS-code on-the-fly gebaseerd op wat je nodig hebt voor de animatie-vertraging.

Als u een eenvoudigere oplossing off-site wilt, dan kan dat download de Sass-mixin. Dit is een beetje lastiger omdat het vereist een Sass-kaart, dus u moet begrijpen hoe u aangepaste eigenschappen kunt toevoegen en uw syntaxis correct kunt schrijven.

Hier is een voorbeeld van hoe je dat zou doen bel de mixin:

 @ include waitAnimate ((animationName: animName, keyframes: (0: (transformatie: schaal (1), achtergrondkleur: blauw), 50: (transformatie: schaal (2), achtergrondkleur: groen), 100: (transformeren : schaal (3), achtergrondkleur: rood)), duur: 2, WaitTime: 1, timingFunction: ease, iterationCount: oneindig)); 

Pro webontwikkelaars moeten er geen moeite mee hebben om de touwen te leren en dit in een herbruikbare mixin te bouwen. Maar beginnende ontwikkelaars kunnen moeite hebben om het werkend te krijgen, vandaar de web-app.

Dit allemaal broncode is gratis beschikbaar op GitHub als u lokaal een kopie wilt downloaden. Maar omdat dit zo'n vreemde functie is, is het niet iets dat je waarschijnlijk nodig zult hebben in veel projecten. Dat is waarom de WAIT! Animatie web-app moet meer dan genoeg zijn om u te helpen een eenmalig probleem oplossen van het vertragen van looped animaties met pure CSS.

Het is echt een leuke hack die ook behoorlijk obscuur is qua ontwerp. Maar het laat zien hoeveel mogelijk is met CSS3 en een beetje vindingrijkheid.