Astăzi vom vorbi despre acest subiect misterios ca animație. În timpul nostru, nu ar putea fi mai urgentă, ca interfețe moderne necesită un grad ridicat de interactivitate si usurinta, ce anume se poate face printr-un CSS-animație competentă.
Animație în CSS3
Ce este cadrelor cheie (cadru cheie)?
Pentru a face animația a lucrat ar trebui să fie folosite așa-numitele (keyframes) - keyframes „cadre cheie“, traduse în engleză.
Keyframe pentru a determina poziția (starea) a elementului la un anumit punct în interval de timp. Acesta este motivul pentru care elementul devine anima și crearea cadrelor cheie - un rol important în crearea de animație.
animație CSS este creat în două etape: crearea de cadre cheie (keyframes) și utilizarea acestora în regulă.
Să ne uităm la comanda.
Pentru a crea un cadru cheie. trebuie să vă înregistrați următoarele proiectare în CSS:
În interiorul acolade prescriem literalmente orice element de schimbare, care este descrisă de către cadrele cheie de acțiune. Cu ajutorul cuvintelor cheie de la și către vom da browser-ul clar din ce proprietăți începem animația și cum o caracteristică și peste.
După cuvintele cheie de la si la noi a pus acolade (deschidere și închidere, desigur). Acesta este locul unde începe magia. În organism, prescriem din proprietăți care definesc elementele pe la animație, și corp - după animația. Este simplu.
De exemplu, dacă dorim să mutați elementul la 50px dreptul la 450px, codul nostru ar fi:
Este demn de remarcat faptul că aceasta este doar jumătate din bătălie. Animație la locul de muncă, aveți nevoie pentru a lega la creat cadre cheie selectorul de a fi legat de aceste schimbări. Ne va permite să se conecteze animația și elementul de animație nume-proprietate, și de animație durată, care este stabilit, orice se va potrivi cu cadrele cheie elementul și cât timp este nevoie de animație.
Să presupunem că vrem să aplice acest efect pentru a bloca .animate (care, desigur, de pre-înregistrate în markup). Apoi, cod de stil va arata ceva de genul:
@keyframes m de la stânga: 50px;
>
la stânga: 450px;
>
>
.animate lățime: 50px;
înălțime: 50px;
animație nume: m;
animație Durata: 1.5s / * Când am pus numărul de „s“ (secunde) sau „MS“ (milisecunde), în funcție de cât de mult este nevoie de animație * /
>
Animatii CSS3 - instrument destul de flexibil și puternic, care este capabil să facă orice pagină statică frumoasă. plin de mișcare și efecte. Desigur, ne vom întâlni cu o mulțime de opțiuni, așa că - vedeți în secțiunea următoare.
Între timp, mult noroc in dezvoltarea web!