Limbajul HTML oferă structura paginii web, iar CSS oferă designul și formatarea acelei aplicații. Această combinație vă permite, de asemenea, să adăugați animație, deoarece elementele animate arată mai atractiv în comparație cu elementele statice. De asemenea, permite unui element să-și schimbe stilul treptat.
Acest articol va ghida cum putem aplica animația elementelor. Deci, să începem!
Ce sunt cadrele cheie de animație CSS?
Pentru a finaliza animația, trebuie să legăm animația la elementul HTML. În acest scop, utilizați cuvântul cheie „ @keyframes ” urmat de numele animației. Această componentă specifică începutul și sfârșitul animației.
Cum se configurează cadrele cheie de animație CSS?
Pentru a configura cadrele cheie de animație în CSS, vom parcurge două exemple.
Exemplul 1
Pentru configurarea cadrelor cheie de animație în CSS, parcurgeți următorii pași:
-
- Adăugați un având numele clasei „ principal-div ”.
- În interiorul div-ului, adăugați un alt div cu numele clasei „ img-peng ”.
- În acest div img-peng, adăugați
pentru a plasa imaginea. Această etichetă are trei atribute, „ src ' atribut pentru a furniza calea imaginii, ' Tot ” este textul alternativ care este adăugat dacă imaginea nu este afișată, iar „ lăţime ” pentru a furniza lățimea imaginii.
HTML
< div clasă = 'main-div' >
< div clasă = 'img-peng' >
< img src = „imagini/penguin.png” Tot = 'pinguin' lăţime = '100' >
div >
div >
.principal-div {
CSS
lăţime: 90 % ;
inaltime: 90px;
culoare de fundal: rgb ( 67 , 66 , 87 ) ;
marja: 20px automat;
umplutură: 10px;
}
În CSS, „ .principal-div ” este adăugat pentru a accesa clasa div. Proprietățile aplicate acestuia sunt explicate mai jos:-
- „ lăţime ”valoarea proprietății definește lățimea div-ului.
- „ înălţime ” proprietatea este utilizată pentru a seta înălțimea div-ului.
- „ culoare de fundal ” proprietatea aplică culoare fundalului elementului.
- „ marginea ” este setat ca „ masina de 20px ”, care indică spațiul de sus și de jos, iar auto înseamnă spațiu egal de la stânga și la dreapta.
- „ căptușeală ”valoarea proprietății este atribuită ca 10px, ceea ce aplică spațiu în jurul conținutului elementului.
Stil img-peng clasă
.img-peng {
latime: 50px;
înălțime: 100px;
poziție: relativă;
animație: agitare;
animatie-durata: 2s;
animatie-functie de sincronizare: 2s;
animație-iterație-număr: infinit;
}
„ .img-peng ” este folosit pentru a accesa clasa div, menționată în fișierul HTML de mai sus. Acest element div este stilat cu proprietățile discutate mai jos:-
- „ lăţime ”valoarea proprietății este utilizată pentru a seta lățimea elementului.
- „ înălţime ”valoarea proprietății este utilizată pentru a seta înălțimea elementului.
- „ poziţie ” proprietății i se atribuie valoarea ” relativ ”, ceea ce înseamnă că va fi poziționat relativ la poziția sa normală.
- „ animaţie ” numele este dat ca “ scutura ”. Cu toate acestea, puteți numi animația în funcție de cerință.
- „ animatie-durata ” reprezintă durata animației, care este de 2 secunde.
- „ animatie-functie de sincronizare ” i se atribuie o valoare de 2s ceea ce înseamnă că în 2 secunde, animația este finalizată.
- „ animație-iterație-număr ” este setat ca infinit, ceea ce înseamnă că această animație va avea loc într-un timp infinit.
Definiți @keyframes Cu la și de la cuvinte cheie
@ cadrele cheie se scutură {
din {
sus: 50px;
}
la {
margine-jos: 200px;
}
}
Descrierea cadrelor cheie de animație setate pentru imagine este listată mai jos:-
- „ @keyframes se agită ” se referă la agitația numelui animației urmată de cuvântul cheie @keyframes. În cadrul acestei reguli este specificat comportamentul animației.
- În interiorul parantezelor sale, „ din ' și ' la ” cuvintele cheie specifică intervale diferite pentru a defini comportamentul animației.
- „ top ” proprietății i se atribuie valoarea de 50px, ceea ce înseamnă că animația începe de la 50px din partea de sus a ecranului și continuă până la 200px din partea de jos.
Ca rezultat, veți vedea următoarea ieșire:
Acum, lăsați animația să se comporte diferit la intervale diferite. Pentru a face acest lucru, utilizați procentele de animație din @keyframes.Specificați @keyframes cu procente
@ cadrele cheie se scutură {
0 % {
stânga: -50px ;
}
25 % {
stânga: 50px;
}
cincizeci % {
stânga: -25px ;
}
75 % {
stânga: 25px;
}
100 % {
stânga: 10px;
}
}
Deci, descrierea fragmentului de cod de mai sus este menționată aici:-
- Valorile procentuale 0%, 25%, 50%, 75% și 100% reprezintă animația la intervale diferite.
- Mai mult, la 0%, spațiul din stânga imaginii va fi „ -50px ”. La 25%, spațiul din stânga va fi „ 50px ”. La 50%, spațiul din stânga va fi „ -25px ”. La 75%, spațiul din stânga va fi „ 25px ”, iar când animația se termină (100%), spațiul din stânga va fi „ 10px ”.
Codul de mai sus afișează următoarea animație:
Să luăm un alt exemplu pentru a vedea cum putem seta animații pentru imagini.Exemplul 2
În HTML, adăugați un
având numele clasei „ Pagina principală ”. În acest element, plasați încă două etichete div cu clasele „ nor1 ' și ' nor2 ”, respectiv.HTML
< div clasă = 'Pagina principală' >
< div clasă = 'cloud1' > div >
< div clasă = 'cloud2' > div >
div >
corp {
CSS
marja: 0 ;
umplutura: 0 ;
}
În CSS, vom atribui următoarele proprietăți CSS elementului body:-
- „ marginea ” proprietatea ca 0 nu specifică niciun spațiu în jurul elementului.
- „ căptușeală ” proprietatea cu valoarea 0 nu specifică niciun spațiu în jurul conținutului elementului.
Stil pagina principală div
.Pagina principală {
imagine de fundal: url ( / imagini / noapte-lup.png ) ;
background-repeat: fără repetare;
dimensiunea fundalului: coperta;
inaltime: 100vh;
poziție: relativă;
preaplin: ascuns;
}
Aici:-
- „ .Pagina principală ” este folosit pentru a accesa clasa div.
- „ imagine de fundal ” proprietății i se atribuie valoarea ” url(/images/wolf-night.png) ” unde imagini este folderul care conține imaginea wolf-night.png.
- „ fundal-repetare ” proprietății i se atribuie valoarea ” fără repetare , ceea ce înseamnă că imaginea va fi afișată o dată.
- „ dimensiunea fundalului ” este setat ca „ acoperi ” pentru a umple întregul element div.
- „ înălţime ” este 100vh, ceea ce reprezintă 100% din înălțimea ferestrei de vizualizare.
- „ poziţie ” ca relativ setează poziția imaginii în raport cu locația sa curentă.
- „ revărsare ”valoarea proprietății este setată ca ascunsă pentru a ascunde partea din imagine care este prea mare pentru a încăpea în container.
Stil cloud1 clasa
.nor1 {
imagine de fundal: url ( / imagini / nor.png ) ;
background-size: conține;
background-repeat: fără repetare;
poziție: absolută;
sus: 100px;
latime: 500px;
înălțime: 300px;
animație: cloudanimation1;
animatie-durata: 70s;
animație-iterație-număr: infinit;
}
Clasa div cloud1 este aplicată cu următoarele proprietăți explicate:-
- „ .nor1 ” este folosit pentru a accesa clasa div cloud1.
- „ imagine de fundal ” proprietatea este setată ca url(/images/cloud.png), unde imaginile sunt folderul care conține imaginea cloud.png.
- „ dimensiunea fundalului „cu valoarea „ conține ” asigură vizibilitatea imaginii.
- „ fundal-repetare ” proprietate cu valoarea setată ca “ fără repetare ” afișează imaginea ca nerepetată.
- „ poziţie ” ca poziție absolută a imaginii în raport cu elementul părinte.
- „ top ” proprietate setează imaginea la 100px din partea de sus.
- „ lăţime ” este utilizată pentru a seta lățimea elementului div la 500px.
- „ înălţime Proprietatea ” este utilizată pentru a seta înălțimea elementului div la 300px.
- „ animaţie ” i se atribuie numele cloudanimation1.
- „ animatie-durata ” reprezintă durata animației, care este de 70 de secunde.
- „ animație-iterație-număr ” i se atribuie valoarea infinit, care va repeta animația de infinite ori.
Până acum, am aplicat proprietățile CSS la pagina principală a clasei div și cloud1. Acum, în secțiunea următoare, vom stila următoarea clasă div numită cloud2.
Clasa de stil cloud2
.nor2 {
imagine de fundal: url ( / imagini / nor.png ) ;
background-size: conține;
background-repeat: fără repetare;
poziție: absolută;
sus: 50px;
latime: 200px;
înălțime: 300px;
animație: cloudanimation2;
animatie-durata: 15s;
animație-iterație-număr: infinit;
}
Clasa div cloud2 este aplicată cu proprietățile care sunt explicate mai jos:-
- „ .nor2 ” este folosit pentru a accesa clasa cloud2.
- „ imagine de fundal ” proprietatea este setată ca url(/images/cloud.png), unde imaginea este un folder care conține imaginea cloud.png.
- „ dimensiunea fundalului ” conține o valoare care asigură vizibilitatea imaginii.
- „ fundal-repetare ” proprietatea cu valoarea setată ca fără repetare afișează imaginea ca nerepetată.
- „ poziţie ” ca poziție absolută a imaginii în raport cu elementul părinte.
- „ top ” proprietate setează imaginea la 100px din partea de sus.
- „ lăţime ” este utilizată pentru a seta lățimea elementului div.
- „ înălţime ” este utilizată pentru a seta înălțimea elementului div.
- „ animaţie ” i se atribuie numele cloudanimation2.
- „ animatie-durata ” reprezintă durata animației.
- „ animație-iterație-număr ” i se atribuie valoarea infinit, care va repeta animația de infinite ori.
Specificați @keyframes pentru cloudanimation1
@ cadre cheie cloudanimation1 {
la {
stânga: 0px;
}
din {
stânga: 100 % ;
}
}
Cloud1 div este legat de animație care este descrisă mai jos:-
- „ @keyframes cloudanimation1 ” numele animației cloudanimation1 este urmat de cuvântul cheie @keyframes care este folosit pentru a specifica tranziția.
- Cuvântul cheie @keyframes specifică modul în care se realizează animația de la început până la sfârșit pe imaginile din cloud.
- „ la ' și ' din ” cuvintele cheie specifică cloud1 se va muta de la 100% la 0px a ecranului.
Specificați @keyframes pentru cloudanimation2
@ cadre cheie cloudanimation2 {
0 % {
stânga: 0 % ;
}
100 % {
stânga: 100 % ;
}
}
Clasa div cloud2 este asociată cu animația care este explicată mai jos:-
- „ @keyframes cloudanimation2 ” reprezintă numele animației cloudanimation2 urmat de cuvântul cheie @keyframes care este folosit pentru a specifica animația.
- „ 0% ' și ' 100% ” reprezintă începutul și sfârșitul animației.
- La 0% din animație, nor-ul ar fi în stânga cu valoarea setată la 0% și se va muta treptat la 100% din lățime.
Ieșire
Asta e tare! Am discutat cum putem specifica animația elementelor folosind cuvântul cheie @keyframes cu succes.Concluzie
CSS ne permite să aplicăm stiluri elementelor HTML. Animația în CSS realizează tranziții de la un stil la altul. Este format din două componente, stilurile de animație și cadrele cheie. Stilurile de animație reprezintă proprietăți diferite, cum ar fi numele, durata animației, numărul de iterații ale animației și multe altele. În timp ce componenta cadru cheie definește începutul și sfârșitul animației. Acest ghid a elaborat modul de configurare a cadrelor cheie de animație cu exemple.
- Adăugați un