Hvordan lage animasjoner med keyframes - dummies

For å lage animerte effekter på nettstedet ditt for å vise på iPad og iPhone, må du bruke keyframes. Mer komplekse CSS 3 animasjoner stole på keyframes. Keyframes er poengene i en animasjon der noe endres. Når du vil endre et animert objekt, må du opprette en ny keyframe.

For eksempel, hvis du vil animere en ball som hopper, som vist i denne figuren, må du ha en keyframe øverst på studsen og en annen nederst på studsen.

Den hoppende ballen med deler av sekunder demarked.

I dette eksemplet er ballen 50 piksler i diameter og beholderen for ballen er 350 piksler høy. Den første keyframe plasserer derfor ballen på bunnen av beholderen, og den siste plasserer den øverst på beholderen.

Her er koden som gjør dette arbeidet:

@ - webkit-keyframes spretter {fra {margin: 300px auto 0;} til {margin: 0 auto 0;}}

An @ -webkit-keyframes-blokk inneholder regler som definerer hvert keyframe. En keyframe definerer stilen for det øyeblikket i animasjonen. Du kan få en start og en slutt som i eksempelet som vises her, eller du kan definere et hvilket som helst antall poeng i mellom. Enkelte nettlesere benytter denne stilen jevnere enn andre, men Safari på iPhone og iPad gjør dette arbeidet ganske bra.

I dette enkle studieteksteksempelet er en animasjon som kalles sprett, definert for å ha to nøkkelrammer: en for starten av animasjonen (fra blokken) og en for enden (den å blokkere). Disse to nøkkelrammene flytter ballen fra bunnen til toppen.

Når du definerer en animasjon med et sett med nøkkelrammer, kan du bruke følgende webkit-animasjonsegenskaper:

• animasjonsnavn - definerer animasjonen som brukes. Pek den til sprett , det keyframe-settet som ble definert tidligere. Hvis navnet ikke er funnet (det mangler eller feilstavet), antar nettleseren standardverdien av ingen og ingen animasjon er produsert:

  -webkit-animasjonsnavn: sprette;
  

• animasjonsvarighet - definerer lengden på animasjonen. Tidsverdivelsesformatet er et tall etterfulgt av en tidsenhetsidentifikator. Tidstidsidentifikatorene er ms i millisekunder og s i sekunder (1000 ms, 1s). Animasjonen av den hoppende ballen varer et sekund.

  Figuren illustrerer hvordan nettleseren automatisk oppretter tweened rammer - rammene mellom topp og bunn. Du definerer start og slutt, og nettleseren fyller inn hva som er "in-be tween . "

  Webkit-animasjon-varighet: 1s;
  

• animasjon-iterasjon-telling - definerer antall ganger en animasjons-syklus blir spilt.Standardverdien er 1, og den verdien gjør animasjonsspillet fra start til slutt en gang. En verdi av uendelig får animasjonen til å gjenta for alltid. Som du kan gjette basert på denne informasjonen, i følgende eksempel, spiller animasjonen ti ganger:

  -webkit-animasjon-iterasjon-telling: 10;
  

• animasjonsretning - definerer om animasjonen skal spilles i omvendt hver annen syklus. Hvis alternativ er spesifisert, spilles alle andre animasjonssykler i omvendt retning. Når en animasjon spilles i omvendt, blir også tidsfunksjonene reversert.

  Dette er grunnen til at du må definere ballen som bare hopper opp. Den alternative animasjonen spilles i omvendt, og tar ballen tilbake til bunnen av boksen (ikke i motsetning til tyngdekraften).

-webkit-animasjons-retning: alternativ;

Sett alt sammen, og stilregelen som gjør det studsende kuleanimeringsarbeidet ser slik ut:

#animationDemo #ball {-webkit-animasjon-navn: sprette; -webkit-animasjon-varighet: 1s; -webkit-animasjon-iterasjon-telling: 10; -webkit-animasjonsretning: Alternativ;}

Når du angir en eller flere egenskaper, må du følge denne bestillingen:

1. Overgangseiendom

2. Overgangsperiode

3. Overgangstidsfunksjon > overgangsforsinkelse

4. Bruk følgende setning for studsekampdemonstrasjonen:

#animationDemo #ball {bounce 1s 10 alternate;}

For en komplett liste over CSS-egenskaper du kan animere ved å bruke overganger, besøk CSS Overgangsmodul Nivå 3.