Hvordan man bruker CSS3 animasjoner - dummies

Transformatferden er ganske kult, men CSS3 lover en enda mer spennende form for animasjon kalt animasjonsmekanismen (vent på det). Her er en animasjon av en boks som beveger seg rundt på skjermen.

Her er den grunnleggende strategien for å bygge en CSS-animasjon:

1. Generer et sett med keyframes.

   Animasjoner er basert på begrepet keyframes. Hver keyframe angir tilstanden til et objekt, og nettleseren forsøker å jevn overgang mellom keyframes.

2. Gi en prosentandel for hvert keyframe.

   Keyframe starter med en prosentandel, som angir hvor i animasjonen keyframe vil skje. Den første keyframe skal være 0% (begynnelsen av animasjonen) og den siste skal være 100% (slutten av animasjonen). Du kan angi så mange mellomliggende keyframes som du vil.

3. Legg til et mini stilark for hver keyframe.

   Plasser noen stilarter du vil ha endret i et lite stilark. På det angitte stedet i tidslinjen vil et element som følger denne animasjonen vise den angitte stiladferansen. Du kan legge inn hvilken stilinformasjon du vil ha her.

4. Bruk animasjonen til elementene dine.

   Med animasjonsregelen kan du bruke en keyframe til et element. Du kan gjenbruke de samme nøkkelrammene blant mange forskjellige elementer hvis du vil.

5. Endre animasjonen.

   Du kan bruke mange av de samme egenskapene til en animasjon som du gjør en overgang. Det finnes en rekke parametere, men de mest brukte elementene er nøkkelramme, tid og gjentakelse.

Ta en titt på koden for animasjon. html for å se alt i bruk:

animasjon. html @keyframes anim {0% {left: 0px; topp: 0px;} 25% {venstre: 100px; topp: 0px;} 50% {venstre: 100px; topp: 100px;} 75% {left: 0px; topp: 100px;} 100% {venstre: 0px; toppen: 0px;}} @ -webkit-keyframes anim {0% {left: 0px; topp: 0px;} 25% {venstre: 100px; topp: 0px;} 50% {venstre: 100px; topp: 100px;} 75% {left: 0px; topp: 100px;} 100% {venstre: 0px; toppen: 0px;}} @ -moz-keyframes anim {0% {left: 0px; topp: 0px;} 25% {venstre: 100px; topp: 0px;} 50% {venstre: 100px; topp: 100px;} 75% {left: 0px; topp: 100px;} 100% {venstre: 0px; toppen: 0px;}} @ -o-keyframes anim {0% {left: 0px; topp: 0px;} 25% {venstre: 100px; topp: 0px;} 50% {venstre: 100px; topp: 100px;} 75% {left: 0px; topp: 100px;} 100% {venstre: 0px; toppen: 0px;}} #box {posisjon: absolutt; grense: 1 px solid svart; -webkit-animasjon: anim 5s lineær uendelig; -moz-animasjon: anim 5s lineær uendelig; -o-animasjon: anim 5s lineær uendelig; animasjon: anim 5s lineær uendelig;} Flyttbar boks

Det er en rekke ting å merke seg om dette eksempelet:

• Opprett et keyframesett som heter Regelen @keyframes brukes til å lage en side- nivå ressurs som kan brukes i resten av CSS.I dette tilfellet er det vant til å generere et keyframe-sett.

• Bygg nettleser-spesifikke versjoner: Dessverre krever animasjonsmekanismen fremdeles nettleserspecifikke prefikser. Det er vanligvis enklest å målrette mot en nettleser og deretter kopiere for de andre nettleserne når den grunnleggende oppførselen fungerer.

• Dette eksempelet beveger et element i et firkantet mønster: For dette bestemte eksempelet vil en div bevege seg i en firkantet bevegelse. Som du ser på keyframes, vil du se at en enkel endring til venstre og topp posisjon av div ble gjort hele tiden.

• Gjør begynnelsen og slutt den samme: Hvis du planlegger å kjøre denne animasjonen kontinuerlig, vil du at begynnelsen og sluttplasseringen skal være den samme.

• Bruk anim keyframe-settet til elementet: Bruk anim keyframe-settet ved hjelp av animasjonsregelen.

• Angi lengden på animasjonen: Animasjoner handler om endringer over tid, så animasjonstegnet krever også en varighet, målt i sekunder eller millisekunder (ms).

• Bestem lettelsen: Easing er hvordan animasjonen fungerer i begynnelsen og slutten av et animasjonssegment. Den lineære regelen som brukes her holder animasjonen i konstant fart. Du kan også bruke (standard oppførsel) enkelt ut for å få elementet til å bevege seg med en variabel hastighet.

• Bestem antall repetisjoner: Du kan angi et antall ganger for å gjenta animasjonen. Hvis du forlater denne delen, vil animasjonen skje bare en gang når siden først lastes. Du kan angi uendelig for å gjøre animasjonen gjentatt så lenge siden er i minnet.

Merk at det er mange andre parametere du kan angi, for eksempel lettelse og forsinkelse. Disse kan settes gjennom animasjonsregelen eller med individuelle regler. For øyeblikket vil du kanskje beholde animasjonene dine så enkelt som mulig, i hvert fall til nettleserne kan administrere animasjoner uten leverandørprefikser.