Pause & Loop CSS Animasjoner med vent! animere
Det er mye du kan gjøre med ren CSS animasjon, men pause og looping en animasjon er ikke mulig med den nåværende W3-spesifikasjonen.
Men med et gratis verktøy som VENTE! animere du kan faktisk lage loopede animasjoner fra grunnen av med tilpassede forsinkelser mellom hver løkke. Dette kan virke som en verdslig oppgave, men det løser et smertepunkt for mange utviklere.
Det bør bemerkes at det er en CSS-eiendom som kalles animasjon-forsinkelse hvilken forsinker start av en CSS animasjon. Men det påvirker ikke en gjentatt animasjon da det bare forsinker utgangspunktet.
VENTE! animere auto-beregner hvor mange pauser må plasseres inne i tilpassede animasjonsnøkkelrammer til opprett den eksakte pausevarigheten du trenger mellom løkker. Dette kan gjøres for hånd, men det er ekstremt forvirret, for ikke å nevne super irriterende.
Denne webapps kan Arbeid med en hvilken som helst CSS3 animasjonsfunksjon, inkludert rotasjoner og transformasjoner. Du skriver ikke noen nye CSS egenskaper, men heller bygger på toppen av keyframes-funksjonen å lage pauser basert på prosenter (fra 0% til 100%) inne i animasjonen.
Sjekk ut hjemmesiden for å se noen få eksempler i aksjon. Det er ganske klart hva du kan gjøre og kildekoden er der for å kopiere / lime inn i ditt eget arbeid.
Vær oppmerksom på at dette er ikke et fullverdig bibliotek. Det er en generator som lager din CSS-kode på-fly basert på hva du trenger for animasjonsforsinkelsen.
Hvis du vil ha en enklere løsning på stedet, så kan du Last ned Sass mixin. Dette er litt vanskeligere fordi det krever et Sass kart, så du må forstå hvordan du legger til egendefinerte egenskaper, og skriv syntaxen din riktig.
Her er et eksempel på hvordan du vil ring mixin:
@include waitAnimate ((animasjonsnavn: animName, keyframes: (0: (transform: skala (1), bakgrunnsfarge: blå), 50: (transform: skala (2), bakgrunnsfarge: grønn), 100: : skala (3), bakgrunnsfarge: rød)), varighet: 2, ventetid: 1, timingFunksjon: letthet, iterasjonSkala: uendelig));
Pro webutviklere burde ikke ha noe problem å lære tauene og bygge dette inn i en gjenbrukbar mixin. Men nybegynnerutviklere kan kjempe for å få det til å fungere, og dermed webapps.
Alt dette kildekode er tilgjengelig gratis på GitHub hvis du vil laste ned en kopi lokalt. Men siden dette er så rart, er det ikke noe du sannsynligvis trenger i mange prosjekter. Det er derfor WAIT! Anime webapp skal være mer enn nok til å hjelpe deg løse et engangs problem av forsinker looped animasjoner med rent CSS.
Det er en veldig morsom hack som også er ganske uklar av design. Men det går å vise hvor mye som er mulig med CSS3 og en liten oppfinnsomhet.
