Pause & Loop CSS Animationer med vänta! Animera
Det finns mycket du kan göra med ren CSS-animering, men pausar & looping en animering är inte möjlig med den nuvarande W3-specifikationen.
Men med ett gratis verktyg som VÄNTA! Animera du kan faktiskt skapa loopade animationer från början med anpassade förseningar mellan varje slinga. Det kan tyckas som en vardaglig uppgift, men det löser en smärtpunkt för många utvecklare.
Det bör noteras att det finns en CSS-egenskap som heter animering-fördröjning som försenar Start av en CSS-animering. Men det påverkar inte en upprepad animering eftersom det bara försenar utgångspunkten.
VÄNTA! Animera auto-beräknar hur många pausar måste placeras inuti anpassade animeringsnyckelramar till skapa den exakta pausperioden du behöver mellan slingor. Detta kan göras för hand men det är extremt engagerat, för att inte tala om super irriterande.
Denna webbapplikation kan arbeta med någon CSS3-animeringsfunktion, inklusive rotationer och transformationer. Du skriver inte några nya CSS-egenskaper utan snarare bygger på toppen av keyframes-funktionen att skapa pauser baserat på procentsatser (från 0% till 100%) inom animationen.
Kolla in hemsidan för att se några exempel i åtgärd. Det är ganska klart vad du kan göra och källkoden är precis där för att kopiera / klistra in i ditt eget arbete.
Observera att detta är inte ett fullständigt bibliotek. Det är en generator som skapar din CSS-kod on-the-fly baserad på vad du behöver för animationsförseningen.
Om du vill ha en enklare lösning på plats kan du ladda ner Sass mixin. Detta är lite svårare eftersom det kräver en Sass-karta, så du måste förstå hur man lägger till egna egenskaper och skriver din syntax korrekt.
Här är ett exempel på hur du skulle ringa mixin:
@include waitAnimate ((animationName: animName, keyframes: (0: (transform: skala (1), bakgrundsfärg: blå), 50: (transform: skala (2), bakgrundsfärg: grön), 100: : skala (3), bakgrundsfärg: röd)), varaktighet: 2, waitTime: 1, timingFunktion: lätthet, iterationCount: oändlig));
Pro webbutvecklare borde inte ha något problem att lära sig repen och bygga detta i en återanvändbar mixin. Men nybörjare utvecklare kan kämpa för att få det att fungera, alltså webben appen.
Allt detta källkod är tillgänglig gratis på GitHub om du vill ladda ner en kopia lokalt. Men eftersom det här är så konstigt, är det inte något som du förmodligen behöver i många projekt. Därför vänta! Animerad webbapp ska vara mer än tillräckligt för att hjälpa dig lösa ett engångsproblem av försenar loopade animationer med ren CSS.
Det är en jätte kul hack som också är ganska otydlig av designen. Men det går att visa hur mycket som är möjligt med CSS3 och lite uppfinningsrikedom.
