CSS er en af de mest effektive måder at gøre websiden interaktiv. Det forvandler udseendet og følelsen af vores grundlæggende hjemmeside. En af de vigtige og spændende funktioner, som CSS tilbyder, er at den lader os udføre animationer. Det giver os mulighed for at flytte elementerne inden for vores side. Lad os starte vores Journey of Animations i CSS i følgende rækkefølge:
Animationer i CSS
Tilføjelse af animationer til vores hjemmeside er en fantastisk måde at henlede brugernes opmærksomhed på. Det tilføjer ikke kun værdi til vores side, men beriger også brugeroplevelsen. Animationen i CSS er bygget på to dele. De er
- Keyframes
- Animation
CSS-animationerne understøttes i alle browsere. Nogle ældre browsere som Safari (op til version 8.0) kræver dog præfiks (-webkit-) for at fortolke animationsegenskaberne. For eksempel:
.anim {højde: 200px bredde: 200px baggrund: lyseblå position: relativ kantradius: 100% -webkit-animation-navn: cssanim / * gamle browsere * / -webkit-animation-varighed: 5s / * gamle browsere * / animation -navn: cssanim animationsvarighed: 5s} / * gamle browsere * / @ -webkit-keyframes cssanim {0% {venstre: 0px} 100% {venstre: 300px}} @keyframes cssanim {0% {venstre: 0px} 100 % {venstre: 300px}}Vi kan bruge eksemplet til html-siden ovenfra og erstatte CSS-koden i typografikoden for at prøve flere eksempler.
Keyframes i CSS
Dette er byggestenen til animationer i CSS. Det plejede at definere specifikke øjeblikke og stilarter for animationen på vores webside. Med andre ord, når vi specificerer @keyframes inde i vores CSS, får det kontrol til at ændre den aktuelle tilstand til en ny tilstand eller animere objekterne i en bestemt varighed.
@Keyframes skal have visse egenskaber for at kontrollere animationen, såsom navnet på animationen, stadier og egenskaber.
Navn - Der kræves et navn for hver animation for at beskrive dens adfærd.
Niveauer - Scenen repræsenterer afslutningen af en animation. Det kan gøres betegnet enten med 'til' og 'fra' nøgleord eller som en procentdel, mens 0% repræsenterer starttilstanden og 100% repræsenterer sluttilstanden for en animation. Fordelen ved at bruge den procentvise repræsentation er, at vi kan definere flere mellemliggende trin imellem, dvs. hvad skal animationens opførsel være på 50% eller 75% osv.
Ejendomme - Disse egenskaber giver os kontrol over @keyframes for at manipulere dem under animationen.
.anim {højde: 200px bredde: 200px baggrund: lyseblå position: relativ kantradius: 100% animationsnavn: cssanim animationsvarighed: 5s} @ keyframes cssanim {0% {transform: skala (0,5) opacitet: 0} 50 % {transform: skala (1,5) opacitet: 1} 100% {transform: skala (1)}}Nu da vi er klare over at definere keyframes. Lad os undersøge animationsegenskaber for at beskrive, hvordan vi kan animere vores elementer og objekter. De to egenskaber, dvs. arve og initial, kan bruges med alle animationstyperne. Disse egenskaber bruges generelt sammen med div-koden for at udvise forskellige adfærd.
initial: Indstiller denne egenskab til standardværdien.
arve: Arver denne ejendom fra dens overordnede element.
Animationsegenskaber
- animations-navn
Det specificerer navnet på animationen, som bruges i @keyframes til at manipulere.De mulige værdier er:
- navn: Dette specificerer navnet, der skal bindes til nøglerammen til animation.
- ingen: Dette er standardværdien og kan bruges til at tilsidesætte de nedarvede eller kaskaderende animationer.
Syntaks:
animationsnavn: navn | ingen | indledende | arve
.anim {højde: 200px bredde: 200px baggrund: lyseblå position: relativ kantradius: 100% animationsnavn: cssanim animationsvarighed: 5s} @keyframes cssanim {0% {venstre: 0px} 100% {venstre: 300px} }- animation-varighed
Det specificerer den tid, det tager for en animation at gennemføre en udførelse. Det er defineret i sekunder eller millisekunder (f.eks. 4s eller 400ms). Standardværdien for denne egenskab er 0s, så hvis denne egenskab ikke er specificeret, finder animationen ikke sted.
Syntaks:
animation-varighed: tid
.anim {højde: 200px bredde: 200px baggrund: blå position: relativ kantradius: 100% animationsnavn: cssanim animationsvarighed: 4s} @keyframes cssanim {0% {transform: skala (0.4) opacitet: 0} 50 % {transform: skala (1.4) opacitet: 1} 100% {transform: skala (1)}}- animationsforsinkelse
Egenskaben animationsforsinkelse giver os mulighed for at specificere forsinkelsen i animationen. Den definerer, hvornår en animationssekvens starter udførelsen.
Værdien af denne egenskab kan deklareres i enten sekunder eller millisekunder (ms). Det kan indeholde både positive og negative værdier. En positiv værdi angiver, at animationen starter, når den angivne tid er gået, og indtil da forbliver den unanimeret. På den anden side starter en negativ værdi straks animationen fra det punkt, som om den allerede har kørt i en bestemt tidsramme.
Syntaks:
animationsforsinkelse: tid
.anim {højde: 200px bredde: 200px baggrund: lyseblå position: relativ kantradius: 100% animationsnavn: cssanim animationsvarighed: 4s animationsforsinkelse: 4s} @keyframes cssanim {0% {venstre: 0px} 100% {venstre: 250px}}- animation-iteration-count
Denne egenskab angiver antallet af gange, en animationssekvens skal afspilles. Standardværdien for denne egenskab er 1.De mulige værdier er:
- nummer - angiver antallet af gentagelser
- uendelig - angiver, at animationen skal gentages for evigt
Syntaks:
animation-iteration-count: antal | uendelig
.anim {højde: 200px bredde: 200px baggrund: lyseblå position: relativ kantradius: 100% animationsnavn: cssanim animationsvarighed: 2s animation-iteration-count: 4} @keyframes cssanim {0% {venstre: 0px} 100% {tilbage: 100 pixel}}- animation-retning
Det definerer animationens retning. Elementets retning kan indstilles til at spille fremad, bagud eller i alternative cykler.Standardværdien for denne egenskab er normal, og den nulstilles for hver cyklus.De mulige værdier er:
normal - Dette er standardopførelsen, og animationen afspilles fremad. Efter hver cyklus kommer animationen til sin oprindelige tilstand og afspilles fremad igen
baglæns - Animationen spilles baglæns. Efter hver cyklus kommer animationen til sin sluttilstand og afspilles baglæns
skifte - Retningen af animationen vendes, dvs. den spiller først frem og derefter baglæns på hver cyklus. Hver ulige cyklus gengiver animation fremad, og hver lige cyklus gengiver baglæns bevægelse.
alternativt omvendt - Animationens retning vendes skiftevis. Her afspilles animationen baglæns og derefter fremad på hver cyklus. Hver ulige cyklus bevæger sig baglæns eller baglæns, og hver lige cyklus gengiver animation fremad.
hvordan man gør beføjelser i java
Syntaks:
animationsretning: normal | omvendt |alternativ | alternativt omvendt
.anim {højde: 200px bredde: 200px baggrund: lyseblå position: relativ kantradius: 100% animationsnavn: cssanim animationsvarighed: 2s animation-iteration-count: uendelig} @keyframes cssanim {0% {venstre: 0px} 100% {tilbage: 100 pixel}}- animation-timing-funktion
Denne egenskab bestemmer hastighedskurven eller animationens bevægelsesstil. Det tildeles at foretage ændringen i animationsstil jævnt fra en form til en anden. Hvis der ikke er tildelt nogen værdi, er den standard for at lette.De mulige værdier for animation-timing-funktion er:
lethed - Dette er ejendommens standardværdi. Her starter animationen langsomt, bliver gradvist hurtig i midten og ender derefter igen langsomt.
lineær - Animationen opretholder den samme hastighed gennem hele cyklussen, dvs. fra start til slut.
lethed - Animationen starter langsomt.
let ud - Animationen slutter langsomt.
let ind-ud - Animationen bevæger sig langsomt både under start og slutning.
cubic-bezier (n, n, n, n) - Denne avancerede funktion lader os oprette en brugerdefineret timing-funktion ved at definere vores egne værdier. Den mulige værdi varierer fra 0 til 1.
Syntaks:
animation-timing-funktion: lineær | lethed | let ud | lethed | let ind-ud |cubic-bezier (n, n, n, n)
.anim {højde: 200px bredde: 200px baggrund: lyseblå position: relativ kantradius: 100% animationsnavn: cssanim animationsvarighed: 2s animationsretning: omvendt} @keyframes cssanim {0% {baggrund: orange venstre: 0px } 50% {baggrund: gul til venstre: 200 pixel øverst: 200 pixel} 100% {baggrund: blå venstre: 100 pixel}}- animation-fyld-tilstand
Dette er en speciel egenskab, da den bestemmer animationsstil før eller efter animationen er spillet.Som standard påvirkes elementets stil ikke af animationen før starten eller efter at den slutter. Denne egenskab er nyttig, da den hjælper med at tilsidesætte animationens standardopførsel.Følgende er mulige værdier for egenskaben animation-fill-mode:
ingen - Dette er standardværdien af ejendommen, dvs. animationsstilarterne anvendes ikke på elementet før eller efter animationen.
fremad - Stilarterne bevares af elementet i den endelige animationssekvens, dvs. efter at animationen er færdig.
tilbage - Stilarterne bevares af elementet i den indledende animationssekvens, dvs. inden animationen stirres især under animationsforsinkelsen.
begge - Dette betyder, at animationen følger i begge retninger, dvs. fremad og bagud
Syntaks:
animation-fyld-tilstand: ingen | fremad | baglæns | begge
.anim {bredde: 50px højde: 50px baggrund: lyseblå farve: hvid fontvægt: fed position: relativ animationsnavn: cssanim animationsvarighed: 5s animation-iteration-count: uendelig kant-radius: 100%} # anim1 { animation-timing-funktion: lethed} # anim2 {animation-timing-funktion: lineær} # anim3 {animation-timing-funktion: lethed-i} # anim4 {animation-timing-funktion: lethed-out} # anim5 {animation- timing-funktion: let-ind-ud} @keyframes cssanim {fra {venstre: 0px} til {venstre: 400px}}- animation-play-tilstand
Denne egenskab angiver, at en animation skal være enten i afspilning eller pause. Når en animation genoptages fra pause, starter den også fra, hvor den forlod.De mulige værdier er:
- spiller - At gengive animationen i gang
- pause - At gengive animationen i pausetilstand.
Syntaks:
animation-play-tilstand: pause | spiller
.anim {bredde: 100px højde: 100px baggrund: lyseblå position: relativ animationsnavn: cssanim animation-varighed: 3s animationsforsinkelse: 2s animation-fyld-tilstand: baglæns kantradius: 100%} @keyframes cssanim {0% {top: 0px baggrundsfarve: orange} 50% {top: 0px baggrundsfarve: grøn} 100% {top: 100pxbaggrundsfarve: blå}}- animation
Dette er kendt som animation stenografi ejendom. Det bruges til renere kode. Når vi først har vænnet os til alle animationsegenskaberne, tilrådes det, at vi bruger animationsformen til kodning hurtigere og definerer alle egenskaberne i en enkelt linje.
Syntaks:
animation: [animationsnavn] | [animation-varighed] | [animation-timing-funktion] |[animationsforsinkelse] | [antal animationer-iteration] | [animationsretning] |[animation-fyld-tilstand] | [animation-play-tilstand]
Alle animationseffekterne, som vi viser ovenfor ved hjælp af forskellige animationsegenskaber, kan opnås ved hjælp af stenografianimation ejendom.
.anim {højde: 200px bredde: 200px baggrund: lyseblå position: relativ kantradius: 100% animationsnavn: cssanim animationsvarighed: 2s animationsretning: normal animation-play-tilstand: pause} @keyframes cssanim {0% {baggrund: orange top: 0 pixel} 50% {baggrund: gul venstre: 200 pix øverst: 200 pixel} 100% {baggrund: blå venstre: 100 pix}}Dette afslutter alle de animationsegenskaber, der kan bruges i CSS. Vi bør prøve forskellige variationer af disse egenskaber for at få et mere klart billede. Når vi bliver komfortable, kan animation stenografi ejendom være til stor hjælp for at skrive renere og hurtigere kode. Dette er en af de vigtige færdigheder, der skal læres i CSS for webudviklere. Da vi har tendens til at fokusere mere på bevægelige objekter i stedet for statiske, kan animationer hjælpe os med at opnå det og også udvikle store bemærkelsesværdige websider.
Tjek vores som kommer med instruktørstyret live træning og projektoplevelse i det virkelige liv. Denne træning gør dig dygtig til at arbejde med back-end og front-end webteknologier. Det inkluderer træning i webudvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.
Har du et spørgsmål til os? Nævn det i kommentarfeltet på 'Animationer i CSS' -blog, så vender vi tilbage til dig.