HTML valoda nodrošina tīmekļa lapas struktūru, un CSS nodrošina šīs lietojumprogrammas dizainu un formatējumu. Šī kombinācija ļauj arī pievienot animāciju, jo animētie elementi izskatās pievilcīgāki salīdzinājumā ar statiskajiem elementiem. Tas arī ļauj elementam pakāpeniski mainīt savu stilu.
Šajā rakstā ir norādīts, kā elementiem var izmantot animāciju. Tātad, sāksim!
Kas ir CSS animācijas atslēgas kadri?
Lai animācija būtu pabeigta, mums animācija ir jāsaista ar HTML elementu. Šim nolūkam izmantojiet atslēgvārdu ' @keyframes ” seko animācijas nosaukums. Šis komponents norāda animācijas sākumu un beigas.
Kā iestatīt CSS animācijas atslēgkadrus?
Lai iestatītu animācijas atslēgkadrus CSS, mēs apskatīsim divus piemērus.
1. piemērs
Lai iestatītu animācijas atslēgkadrus CSS, veiciet tālāk norādītās darbības.
-
- Pievienojiet ar klases nosaukumu ' galvenais-div ”.
- Iekšpusē div pievienojiet vēl vienu div ar klases nosaukumu ' img-pengs ”.
- Šajā img-peng div daļā pievienojiet
, lai ievietotu attēlu. Šim tagam ir trīs atribūti, ' src ' atribūts, lai nodrošinātu attēla ceļu, ' viss ' ir alternatīvais teksts, kas tiek pievienots, ja attēls netiek parādīts, un ' platums ” atribūts, lai nodrošinātu attēla platumu.
HTML
< div klasē = 'galvenais-div' >
< div klasē = 'img-peng' >
< img src = 'images/pingguin.png' viss = 'pingvīns' platums = '100' >
div >
div >
.main-div {
CSS
platums: 90 % ;
augstums: 90 pikseļi;
fona krāsa: rgb ( 67 , 66 , 87 ) ;
piemale: 20px auto;
polsterējums: 10 pikseļi;
}
CSS sistēmā “ .main-div ” ir pievienots, lai piekļūtu div klasei. Tam piemērotās īpašības ir izskaidrotas tālāk:-
- ' platums ” rekvizīta vērtība nosaka div platumu.
- ' augstums ” rekvizīts tiek izmantots, lai iestatītu div augstumu.
- ' fona krāsa ” īpašums piemēro krāsu elementa fonam.
- ' starpība ' ir iestatīts kā ' 20px automašīna ”, kas norāda atstarpi no augšas un apakšas, un auto nozīmē vienādu atstarpi no kreisās un labās puses.
- ' polsterējums ” rekvizīta vērtība tiek piešķirta kā 10 pikseļi, kas ap elementa saturu izmanto atstarpi.
Stila img-peng klase
.img-peng {
platums: 50 pikseļi;
augstums: 100 pikseļi;
pozīcija: relatīvs;
animācija: krata;
animācijas ilgums: 2s;
animācijas laika funkcija: 2s;
animācijas atkārtojumu skaits: bezgalīgs;
}
' .img-peng ” tiek izmantots, lai piekļūtu div klasei, kas minēta iepriekš minētajā HTML failā. Šim div elementam ir stils, izmantojot tālāk aprakstītās īpašības:-
- ' platums ” rekvizīta vērtība tiek izmantota, lai iestatītu elementa platumu.
- ' augstums ” rekvizīta vērtība tiek izmantota, lai iestatītu elementa augstumu.
- ' pozīciju 'īpašumam tiek piešķirta vērtība' radinieks ”, kas nozīmē, ka tas tiks novietots attiecībā pret parasto pozīciju.
- ' animācija 'nosaukums tiek dots kā' krata ”. Tomēr jūs varat nosaukt animāciju atbilstoši prasībām.
- ' animācijas ilgums ” apzīmē animācijas ilgumu, kas ir 2 sekundes.
- ' animācijas laika funkcija ” ir piešķirta vērtība 2s, kas nozīmē, ka pēc 2 sekundēm animācija ir pabeigta.
- ' animācijas atkārtojumu skaits ” ir iestatīts kā bezgalīgs, kas nozīmē, ka šī animācija notiks bezgalīgā laikā.
Definējiet @keyframes ar atslēgvārdiem uz un no
@ atslēgkadri kratās {
no {
augšpusē: 50 pikseļi;
}
uz {
piemale-apakšā: 200 pikseļi;
}
}
Attēlam iestatīto animācijas atslēgkadru apraksts ir norādīts tālāk:-
- ' @keyframes krata ” attiecas uz animācijas nosaukuma sakratīšanu, kam seko atslēgvārds @keyframes. Šajā noteikumā ir norādīta animācijas darbība.
- Tās cirtainajās iekavās atrodas ' no ' un ' uz ” atslēgvārdi norāda dažādus intervālus, lai definētu animācijas darbību.
- ' tops ” rekvizīta vērtība ir 50 pikseļi, kas nozīmē, ka animācija sākas no 50 pikseļiem no ekrāna augšdaļas un turpinās līdz 200 pikseļiem apakšā.
Rezultātā jūs redzēsit šādu izvadi:
Tagad ļaujiet animācijai darboties atšķirīgi dažādos intervālos. Lai to izdarītu, izmantojiet @keyframes animācijas procentus.Norādiet @keyframes ar procentiem
@ atslēgkadri kratās {
0 % {
pa kreisi: -50 pikseļi ;
}
25 % {
pa kreisi: 50 pikseļi;
}
piecdesmit % {
pa kreisi: -25 pikseļi ;
}
75 % {
pa kreisi: 25 pikseļi;
}
100 % {
pa kreisi: 10 pikseļi;
}
}
Tātad iepriekš minētā koda fragmenta apraksts ir minēts šeit:-
- Procentuālās vērtības 0%, 25%, 50%, 75% un 100% attēlo animāciju dažādos intervālos.
- Turklāt pie 0% atstarpe attēla kreisajā pusē būs “ -50 pikseļi ”. Pie 25% atstarpe pa kreisi būs ' 50 pikseļi ”. Pie 50% atstarpe pa kreisi būs ' -25 pikseļi ”. Pie 75% atstarpe būs “ 25 pikseļi ”, un kad animācija ir pabeigta (100%), kreisā atstarpe būs “ 10 pikseļi ”.
Iepriekš minētais kods parāda šādu animāciju:
Ņemsim vēl vienu piemēru, lai redzētu, kā mēs varam iestatīt animācijas attēliem.2. piemērs
HTML valodā pievienojiet
ar klases nosaukumu ' galvenā lapa ”. Šajāelementā ievietojiet vēl divus div tagus ar klasēm ' mākonis1 ' un ' mākonis2 ”, attiecīgi.HTML
< div klasē = 'galvenā lapa' >
< div klasē = 'mākonis1' > div >
< div klasē = 'Cloud2' > div >
div >
ķermeni {
CSS
piemale: 0 ;
polsterējums: 0 ;
}
CSS pamattekstam mēs piešķirsim šādus CSS rekvizītus:-
- ' starpība ” rekvizīts kā 0 nenorāda, ka ap elementu nav atstarpes.
- ' polsterējums ” rekvizīts ar vērtību 0 nenorāda atstarpes ap elementa saturu.
Galvenās lapas stils div
.galvenā lapa {
fona attēls: url ( / attēlus / vilku nakts.png ) ;
fona atkārtojums: neatkārtot;
fona izmērs: vāks;
augstums: 100vh;
pozīcija: relatīvs;
pārplūde: slēpta;
}
Šeit:-
- ' .galvenā lapa ” tiek izmantots, lai piekļūtu div klasei.
- ' fona attēls 'īpašumam tiek piešķirta vērtība' url(/images/wolf-night.png) ” kur attēli ir mape, kurā ir attēls wolf-night.png.
- ' fona atkārtojums 'īpašumam tiek piešķirta vērtība' nē-atkārtoties , kas nozīmē, ka attēls tiks parādīts vienu reizi.
- ' fona izmērs ' ir iestatīts kā ' piesegt ”, lai aizpildītu visu div elementu.
- ' augstums ” ir 100 VH, kas ir 100% no skata loga augstuma.
- ' pozīciju ” kā relatīvais iestata attēla pozīciju attiecībā pret tā pašreizējo atrašanās vietu.
- ' pārplūde ” rekvizīta vērtība ir iestatīta kā slēpta, lai paslēptu attēla daļu, kas ir pārāk liela, lai ietilptu konteinerā.
Stila mākonis1 klase
.cloud1 {
fona attēls: url ( / attēlus / mākonis.png ) ;
fona izmērs: satur;
fona atkārtojums: neatkārtot;
pozīcija: absolūta;
augšpusē: 100 pikseļi;
platums: 500 pikseļi;
augstums: 300 pikseļi;
animācija: cloudanimation1;
animācijas ilgums: 70s;
animācijas atkārtojumu skaits: bezgalīgs;
}
Div klases mākonis1 tiek lietots ar šādām paskaidrotām īpašībām:-
- ' .cloud1 ” tiek izmantots, lai piekļūtu div klases mākonis1.
- ' fona attēls ” rekvizīts ir iestatīts kā url(/images/cloud.png), kur attēli ir mape, kurā atrodas attēla Cloud.png.
- ' fona izmērs ' ar vērtību ' satur ” nodrošina attēla redzamību.
- ' fona atkārtojums ' rekvizīts ar vērtību, kas iestatīta kā ' nē-atkārtoties ” parāda attēlu kā neatkārtotu.
- ' pozīciju ” kā absolūtā pozīcija attēlam attiecībā pret tā vecākelementu.
- ' tops ” rekvizīts iestata attēlu 100 pikseļus no augšas.
- ' platums ” rekvizīts tiek izmantots, lai iestatītu div elementa platumu uz 500 pikseļiem.
- ' augstums ” rekvizīts tiek izmantots, lai iestatītu div elementa augstumu uz 300 pikseļiem.
- ' animācija ” tiek piešķirts nosaukums cloudanimation1.
- ' animācijas ilgums ” apzīmē animācijas ilgumu, kas ir 70 sekundes.
- ' animācijas atkārtojumu skaits ” ir piešķirta vērtība bezgalīgs, kas atkārtos animāciju bezgalīgi daudz reižu.
Līdz šim mēs esam piemērojuši CSS rekvizītus div klases galvenajai lapai un mākonim1. Tagad nākamajā sadaļā mēs veidosim nākamo div klasi ar nosaukumu Cloud2.
Stila mākonis2 klase
.cloud2 {
fona attēls: url ( / attēlus / mākonis.png ) ;
fona izmērs: satur;
fona atkārtojums: neatkārtot;
pozīcija: absolūta;
augšpusē: 50 pikseļi;
platums: 200 pikseļi;
augstums: 300 pikseļi;
animācija: cloudanimation2;
animācijas ilgums: 15s;
animācijas atkārtojumu skaits: bezgalīgs;
}
Div klases mākonis2 tiek lietots ar tālāk izskaidrotajiem rekvizītiem:-
- ' .cloud2 ” tiek izmantots, lai piekļūtu klases mākonim2.
- ' fona attēls ” rekvizīts ir iestatīts kā url(/images/cloud.png), kur attēls ir mape, kurā ir attēla Cloud.png.
- ' fona izmērs ” satur vērtību, kas nodrošina attēla redzamību.
- ' fona atkārtojums ” rekvizīts ar vērtību, kas iestatīts kā no-repeat, parāda attēlu kā neatkārtošanos.
- ' pozīciju ” kā absolūtā pozīcija attēlam attiecībā pret tā vecākelementu.
- ' tops ” rekvizīts iestata attēlu 100 pikseļus no augšas.
- ' platums ” rekvizīts tiek izmantots, lai iestatītu div elementa platumu.
- ' augstums ” rekvizīts tiek izmantots, lai iestatītu div elementa augstumu.
- ' animācija ” tiek piešķirts nosaukums cloudanimation2.
- ' animācijas ilgums ” apzīmē animācijas ilgumu.
- ' animācijas atkārtojumu skaits ” ir piešķirta vērtība bezgalīgs, kas atkārtos animāciju bezgalīgi daudz reižu.
Norādiet @keyframes mākoņanimācijai1
@ atslēgas kadru mākoņanimācija1 {
uz {
pa kreisi: 0 pikseļi;
}
no {
pa kreisi: 100 % ;
}
}
Cloud1 div ir saistīts ar animāciju, kas aprakstīta tālāk:-
- ' @keyframes mākoņanimācija1 ” animācijas cloudanimation1 nosaukumam seko atslēgvārds @keyframes, ko izmanto, lai norādītu pāreju.
- Atslēgvārds @keyframes norāda, kā mākoņa attēlos tiek veikta animācija no sākuma līdz beigām.
- ' uz ' un ' no ” atslēgvārdi norāda, ka mākonis1 pārvietosies no 100% uz ekrāna 0 pikseļiem.
Norādiet @keyframes mākoņanimācijai2
@ atslēgas kadru mākoņanimācija2 {
0 % {
pa kreisi: 0 % ;
}
100 % {
pa kreisi: 100 % ;
}
}
Div klases mākonis2 ir saistīts ar animāciju, kas ir izskaidrota tālāk:-
- ' @keyframes mākoņanimācija2 ” ir animācijas nosaukums cloudanimation2, kam seko atslēgvārds @keyframes, kas tiek izmantots, lai norādītu animāciju.
- ' 0% ' un ' 100% ” apzīmē animācijas sākumu un beigas.
- Pie 0% animācijas mākonis būtu pa kreisi ar vērtību, kas iestatīta kā 0%, un tas pakāpeniski pārvietosies uz 100% no platuma.
Izvade
Tas ir forši! Mēs esam apsprieduši, kā mēs varam veiksmīgi norādīt animāciju elementiem, izmantojot atslēgvārdu @keyframes.Secinājums
CSS ļauj mums piemērot stilus HTML elementiem. CSS animācija veic pārejas no viena stila uz citu. Tas sastāv no diviem komponentiem, animācijas stiliem un atslēgkadriem. Animācijas stili atspoguļo dažādas īpašības, piemēram, to nosaukumu, animācijas ilgumu, animācijas iterāciju skaitu un citus. Tā kā atslēgas kadra komponents nosaka animācijas sākumu un beigas. Šajā rokasgrāmatā ar piemēriem ir aprakstīts, kā iestatīt animācijas atslēgkadrus.
- Pievienojiet