HTML jezik osigurava strukturu web stranice, a CSS dizajn i oblikovanje te aplikacije. Ova kombinacija vam također omogućuje dodavanje animacije, jer animirani elementi izgledaju privlačnije u usporedbi sa statičnim elementima. Također dopušta elementu da postupno mijenja svoj stil.
Ovaj članak će vas uputiti kako možemo primijeniti animaciju na elemente. Dakle, počnimo!
Što su ključni okviri CSS animacije?
Da bi animacija bila gotova, moramo je vezati za HTML element. U tu svrhu koristite ključnu riječ “ @ključni okviri ” nakon čega slijedi naziv animacije. Ova komponenta određuje početak i kraj animacije.
Kako postaviti ključne okvire CSS animacije?
Da bismo postavili ključne okvire animacije u CSS-u, proći ćemo kroz dva primjera.
Primjer 1
Za postavljanje ključnih okvira animacije u CSS-u, izvršite sljedeće korake:
-
- Dodajte koji ima naziv klase “ glavni-div ”.
- Unutar diva dodajte još jedan div s nazivom klase ' img-peng ”.
- Unutar ovog diva img-peng, dodajte
da postavite sliku. Ova oznaka ima tri atributa, ' src ” atribut za pružanje putanje slike, “ sve ” je alternativni tekst koji se dodaje ako slika nije prikazana, a “ širina ” za pružanje širine slike.
HTML
< div razreda = 'glavni-div' >
< div razreda = 'img-peng' >
< img src = 'slike/pingvin.png' sve = 'pingvin' širina = '100' >
div >
div >
.glavni-div {
CSS
širina: 90 % ;
visina: 90px;
boja pozadine: rgb ( 67 , 66 , 87 ) ;
margina: 20px auto;
ispuna: 10px;
}
U CSS-u, ' .glavni-div ” dodaje se za pristup klasi div. Svojstva primijenjena na njega objašnjena su u nastavku:-
- “ širina ” vrijednost svojstva definira širinu diva.
- “ visina ” Svojstvo se koristi za postavljanje visine diva.
- “ boja pozadine ” svojstvo primjenjuje boju na pozadinu elementa.
- “ margina ' postavljeno je kao ' 20px auto ”, što označava razmak odozgo i odozdo, a auto znači jednak razmak od lijevo i desno.
- “ podstava ” vrijednost svojstva dodijeljena je kao 10px, što primjenjuje prostor oko sadržaja elementa.
Stil img-peng klasa
.img-peng {
širina: 50px;
visina: 100px;
položaj: relativan;
animacija: tresti;
animacija-trajanje: 2s;
funkcija mjerenja vremena animacije: 2s;
broj ponavljanja animacije: beskonačno;
}
' .img-peng ” koristi se za pristup div klasi, spomenutoj u gornjoj HTML datoteci. Ovaj element div je stiliziran sa svojstvima o kojima se raspravlja u nastavku:-
- “ širina ” vrijednost svojstva koristi se za postavljanje širine elementa.
- “ visina ” vrijednost svojstva koristi se za postavljanje visine elementa.
- “ položaj ” svojstvu je dodijeljena vrijednost “ relativna “, što znači da će biti postavljen u odnosu na svoj normalni položaj.
- “ animacija ” naziv je dat kao “ tresti ”. Međutim, animaciju možete imenovati prema zahtjevu.
- “ animacija-trajanje ” predstavlja trajanje animacije, a to je 2 sekunde.
- “ funkcija mjerenja vremena animacije ” dodijeljena je vrijednost 2s što znači da je animacija završena za 2 sekunde.
- “ brojanje ponavljanja animacije ” je postavljeno kao beskonačno, što znači da će se ova animacija pojaviti u beskonačnom vremenu.
Definirajte @keyframes s do i od ključnih riječi
@ ključni kadrovi se tresu {
iz {
gore: 50px;
}
do {
margina-dno: 200px;
}
}
Opis ključnih okvira animacije postavljenih na sliku naveden je u nastavku:-
- “ @keyframes tresti ” odnosi se na naziv animacije shake iza kojeg slijedi ključna riječ @keyframes. Unutar ovog pravila specificirano je ponašanje animacije.
- Unutar vitičastih zagrada, ' iz ' i ' do ” ključne riječi određuju različite intervale za definiranje ponašanja animacije.
- ' vrh ” svojstvu je dodijeljena vrijednost od 50px, što znači da animacija počinje od 50px od vrha zaslona i nastavlja se do 200px pri dnu.
Kao rezultat, vidjet ćete sljedeći izlaz:
Sada neka se animacija ponaša drugačije u različitim intervalima. Da biste to učinili, upotrijebite postotke animacije u @keyframes.Navedite @keyframes s postocima
@ ključni kadrovi se tresu {
0 % {
lijevo: -50px ;
}
25 % {
lijevo: 50px;
}
pedeset % {
lijevo: -25 px ;
}
75 % {
lijevo: 25px;
}
100 % {
lijevo: 10px;
}
}
Dakle, ovdje se spominje opis gornjeg isječka koda:-
- Postotne vrijednosti 0%, 25%, 50%, 75% i 100% predstavljaju animaciju u različitim intervalima.
- Štoviše, na 0%, prostor s lijeve strane slike bit će ' -50px ”. Na 25%, prostor s lijeve strane bit će ' 50 px ”. Na 50%, prostor s lijeve strane bit će ' -25 px ”. Na 75%, lijevi prostor bit će ' 25 px ', a kada animacija završi (100%), lijevo mjesto će biti ' 10 px ”.
Gornji kod prikazuje sljedeću animaciju:
Uzmimo još jedan primjer da vidimo kako možemo postaviti animacije na slike.Primjer 2
U HTML dodajte
koji ima naziv klase “ glavna stranica ”. Unutar ovogelementa postavite još dvije div oznake s klasama “ oblak1 ' i ' oblak2 ”, odnosno.HTML
< div razreda = 'glavna stranica' >
< div razreda = 'oblak1' > div >
< div razreda = 'oblak2' > div >
div >
tijelo {
CSS
margina: 0 ;
padding: 0 ;
}
U CSS-u elementu tijela dodijelit ćemo sljedeća CSS svojstva:-
- “ margina ” svojstvo kao 0 ne navodi razmak oko elementa.
- “ podstava ” Svojstvo s vrijednošću 0 ne navodi razmak oko sadržaja elementa.
Stil glavne stranice div
.glavna stranica {
pozadinska slika: url ( / slike / vučja noć.png ) ;
pozadinsko ponavljanje: bez ponavljanja;
veličina pozadine: naslovnica;
visina: 100vh;
položaj: relativan;
preljev: skriven;
}
Ovdje:-
- “ .glavna stranica ” koristi se za pristup div klasi.
- “ pozadinska slika ” svojstvu je dodijeljena vrijednost “ url(/images/wolf-night.png) ” gdje je images mapa koja sadrži sliku wolf-night.png.
- “ pozadinsko ponavljanje ” svojstvu je dodijeljena vrijednost “ nema-ponoviti , što znači da će se slika prikazati jednom.
- “ veličina pozadine ' postavljeno je kao ' pokriti ” za popunjavanje cijelog div elementa.
- “ visina ” je 100vh što je 100% visine prozora.
- “ položaj ” kao relativno postavlja položaj slike u odnosu na njezinu trenutnu lokaciju.
- “ prelijevanje ” vrijednost svojstva postavljena je kao skrivena kako bi se sakrio dio slike koji je prevelik da stane u spremnik.
Stil oblak1 klasa
.oblak1 {
pozadinska slika: url ( / slike / oblak.png ) ;
veličina pozadine: sadrži;
pozadinsko ponavljanje: bez ponavljanja;
pozicija: apsolutna;
gore: 100 px;
širina: 500px;
visina: 300px;
animacija: cloudanimation1;
animacija-trajanje: 70s;
broj ponavljanja animacije: beskonačno;
}
Klasa div cloud1 primjenjuje se sa sljedećim objašnjenim svojstvima:-
- “ .oblak1 ” koristi se za pristup oblaku klase div1.
- “ pozadinska slika ” Svojstvo je postavljeno kao url(/images/cloud.png), gdje su slike mapa koja sadrži sliku cloud.png.
- “ veličina pozadine ' sa vrijednošću ' sadržavati ” osigurava vidljivost slike.
- “ pozadinsko ponavljanje ' svojstvo s vrijednošću postavljenom kao ' nema-ponoviti ” prikazuje sliku kao neponovljenu.
- “ položaj ” kao apsolutni pozicionira sliku u odnosu na roditeljski element.
- “ vrh ” svojstvo postavlja sliku na 100 px od vrha.
- “ širina ” Svojstvo se koristi za postavljanje širine elementa div na 500px.
- “ visina ” Svojstvo se koristi za postavljanje visine div elementa na 300px.
- “ animacija ” dodijeljen je naziv cloudanimation1.
- “ animacija-trajanje ” predstavlja trajanje animacije koja iznosi 70 sekundi.
- “ brojanje ponavljanja animacije ” dodijeljena je vrijednost beskonačno, što će ponavljati animaciju beskonačno mnogo puta.
Do sada smo CSS svojstva primijenili na div klasu main-page i cloud1. Sada, u sljedećem odjeljku, stilizirat ćemo sljedeću div klasu pod nazivom cloud2.
Klasa stil oblak2
.oblak2 {
pozadinska slika: url ( / slike / oblak.png ) ;
veličina pozadine: sadrži;
pozadinsko ponavljanje: bez ponavljanja;
pozicija: apsolutna;
gore: 50px;
širina: 200px;
visina: 300px;
animacija: cloudanimation2;
animacija-trajanje: 15s;
broj ponavljanja animacije: beskonačno;
}
Klasa div cloud2 primjenjuje se sa svojstvima koja su objašnjena u nastavku:-
- “ .oblak2 ” koristi se za pristup klasnom oblaku2.
- “ pozadinska slika ” Svojstvo je postavljeno kao url(/images/cloud.png), gdje je slika mapa koja sadrži sliku cloud.png.
- “ veličina pozadine ” sadrži vrijednost koja osigurava vidljivost slike.
- “ pozadinsko ponavljanje ” Svojstvo s vrijednošću postavljenom kao bez ponavljanja prikazuje sliku kao neponavljanje.
- “ položaj ” kao apsolutni pozicionira sliku u odnosu na roditeljski element.
- “ vrh ” svojstvo postavlja sliku na 100 px od vrha.
- “ širina ” Svojstvo se koristi za postavljanje širine elementa div.
- “ visina ” Svojstvo se koristi za postavljanje visine elementa div.
- “ animacija ” dodijeljen je naziv cloudanimation2.
- “ animacija-trajanje ” predstavlja trajanje animacije.
- “ brojanje ponavljanja animacije ” dodijeljena je vrijednost beskonačno, što će ponavljati animaciju beskonačno mnogo puta.
Navedite @keyframes za cloudanimation1
@ ključne slike cloudanimation1 {
do {
lijevo: 0px;
}
iz {
lijevo: 100 % ;
}
}
Cloud1 div povezan je s animacijom koja je opisana u nastavku:-
- “ @keyframes cloudanimation1 ” iza imena animacije cloudanimation1 slijedi ključna riječ @keyframes koja se koristi za specificiranje prijelaza.
- Ključna riječ @keyframes određuje kako se animacija izvodi od početka do kraja na slikama u oblaku.
- ' do ' i ' iz ” ključne riječi određuju da će se oblak1 pomaknuti sa 100% na 0px zaslona.
Navedite @keyframes za cloudanimation2
@ ključne slike animacija oblaka2 {
0 % {
lijevo: 0 % ;
}
100 % {
lijevo: 100 % ;
}
}
Klasa div cloud2 povezana je s animacijom koja je objašnjena u nastavku:-
- “ @keyframes cloudanimation2 ” predstavlja naziv animacije cloudanimation2 iza kojeg slijedi ključna riječ @keyframes koja se koristi za određivanje animacije.
- ' 0% ' i ' 100% ” predstavljaju početak i kraj animacije.
- Na 0% animacije, oblak bi bio lijevo s vrijednošću postavljenom na 0%, a postupno će se pomaknuti na 100% širine.
Izlaz
To je super! Raspravljali smo o tome kako možemo uspješno odrediti animaciju za elemente pomoću ključne riječi @keyframes.Zaključak
CSS nam dopušta primjenu stilova na HTML elemente. Animacija u CSS-u izvodi prijelaze iz jednog stila u drugi. Sastoji se od dvije komponente, stilova animacije i ključnih kadrova. Stilovi animacije predstavljaju različita svojstva kao što su njihov naziv, trajanje animacije, broj ponavljanja animacije i više. Dok komponenta ključnog kadra definira početak i kraj animacije. Ovaj vodič razradio je kako postaviti ključne okvire animacije s primjerima.
- Dodajte