Pause & Loop CSS Animationer med WAIT! Animér
Der er meget, du kan gøre med ren CSS animation, men pauser & looping en animation er ikke mulig med den nuværende W3 spec.
Men med et gratis værktøj som VENTE! Animér du kan faktisk Opret loopede animationer fra bunden med brugerdefinerede forsinkelser mellem hver loop. Dette kan virke som en dagligdags opgave, men det løser et smertepunkt for mange udviklere.
Det skal bemærkes, at der er en CSS-ejendom kaldet animation-forsinkelse hvilken forsinker Start af en CSS animation. Men det påvirker ikke en gentagende animation da det kun forsinker startpunktet.
VENTE! Animér auto-beregner hvor mange pauser skal placeres inde i brugerdefinerede animationsnøgler til Opret den nøjagtige pause varighed du har brug for mellem sløjfer. Dette kunne gøres for hånd, men det er ekstremt forvirret, for ikke at nævne super irriterende.
Denne webapp kan arbejde med enhver CSS3 animationsfunktion, herunder rotationer og transformationer. Du skriver ikke nogen nye CSS egenskaber, men snarere bygger oven på keyframes funktionen at skabe pauser baseret på procentdele (fra 0% til 100%) inde i animationen.
Tjek hjemmesiden for at se et par eksempler i aktion. Det er ret klart, hvad du kan gøre, og kildekoden er lige der for at kopiere / indsætte i dit eget arbejde.
Bemærk venligst at dette er ikke et fuldt udbygget bibliotek. Det er en generator der opretter din CSS-kode on-the-fly baseret på alt hvad du behøver for animationsforsinkelsen.
Hvis du vil have en enklere løsning på stedet, så kan du download Sass mixin. Dette er lidt vanskeligere fordi det kræver et Sass kort, så du skal forstå, hvordan du tilføjer brugerdefinerede egenskaber og skriver din syntaks korrekt.
Her er et eksempel på, hvordan du ville kalder mixin:
@include waitAnimate ((animationName: animName, keyframes: (0: (transform: skala (1), baggrundsfarve: blå), 50: (transform: skala (2), baggrundsfarve: grøn), 100: : skala (3), baggrundsfarve: rød)), varighed: 2, ventetid: 1, timingFunktion: lethed, iteration Antal: uendelig));
Pro web-udviklere bør ikke have noget problem at lære reb og bygge dette i en genanvendelig mixin. Men novice-udviklere kan kæmpe for at få det til at fungere, og dermed webapps.
Alt dette kildekode er tilgængelig gratis på GitHub hvis du vil downloade en kopi lokalt. Men da dette er så mærkeligt, er det ikke noget, du sandsynligvis har brug for i mange projekter. Derfor ventes! Animerede webapp skal være mere end nok til at hjælpe dig løse et engangs problem af forsinker loopede animationer med ren CSS.
Det er en rigtig sjov hack, der også er temmelig uklart af design. Men det går for at vise, hvor meget der er muligt med CSS3 og lidt opfindsomhed.
