animații css rapid și ușor
Am învățat să vă împărtășesc și CSS-l în acest depozit pe GitHub: mekentosj / blog-ferestre-animații.
HTML5 și CSS3 practica de la zero la rezultatul!
Iată cum sa format GIF arata ca rezultatul final. Animație ușor încetinit pentru a face clar ce se întâmplă:
Dacă vrei să faci ceva de genul asta, citiți în continuare despre proprietățile de conversie CSS. Noi vă va spune în detaliu despre Rotate () și traduce ().
Animați proprietăți individuale
Primul lucru pe care am animat - este în jos alunecare Papers bibliotecă logo-ul paginii. Luați în considerare CSS sa:
poziționare absolută este utilizat pentru a putea stabili locația elementului atunci când se încarcă pagina, iar apoi este controlată de animație slide-bibliotecă. facilitate de animație - această reducere, capacitatea de a seta mai multe proprietăți:
Animație slide bibliotecă set pentru a derula în decurs de 4 secunde, la o întârziere de 0,5 secunde. Întârziere sporește impresia de animație, ceea ce face mai proeminent starea inițială a paginii, iar funcția de sincronizare ajută animație arata mai natural: ușurința-out înseamnă că, la sfârșitul anului un pic mai lent.
Înapoi la originalul „doanimatsionnomu“ la sfârșitul animației - acesta este un comportament normal al elementului. Opțiunea înainte de animație direcția permite bibliotecii să fie păstrate ferm în locul său.
Asigurați-un element apar de nicaieri la fel de ușor ca să-l ascundă pentru div, se deplasează dincolo de pagina sau schimbarea opacitate. Aici este un slide-bibliotecă:
Pentru a muta în orizontal sau vertical, stream-l pe axa X sau Y. în acest caz, vom muta biblioteca de sus în jos pe pagina folosind translateY.
animație multiplă
Din păcate, atunci când se utilizează metoda de mai sus nu pot fi aplicate la un articol dintr-o dată două animații, dar în mai multe zone ale paginii a trebuit să o facă.
Un bun exemplu de animație CSS multiple aplicate unui element este mare nor stânga. Trebuie să avem un nor a apărut și sa mutat la bibliotecă încet, și apoi cantitatea de timp nedeterminată încrețit înainte și înapoi.
HTML5 și CSS3 practica de la zero la rezultatul!
Prima animație numit nori-stânga este aplicat la div. Prin creșterea treptată a norului de opacitate magic apar simultan pe ecran prin deplasarea axei X (dreapta).
Cloud șovăie înainte și înapoi: animația este încă în desfășurare, din moment ce suntem în stenografie durata întrebat infinit.
Rotirea elementelor
În plus, elementele pot fi rotite, de exemplu, apăsați pe logo-ul Papers se mută de la stânga la dreapta ca un pendul. În acest caz, am folosit Rotație () pentru a transforma origine. Aceste două proprietăți fixa macaraua pe X (0) axa, în același timp, permițându-i să se rotească numai pe axa Y (50%).
Dacă descărcați un exemplu cu mekentosj / blog-ferestre-animații. este posibil să experimenteze cu diferite unghiuri folosind valori și procente negative și pozitive.
O notă privind prefixele versiunea furnizor
Dacă doriți munca de animație în cele mai multe browsere, va trebui să activați prefixele versiune furnizor. Acestea sunt folosite ca setări de animație și a cadrelor cheie. Aceste prefixe:
-WebKit: Chrome, iOS, Safari
-ms: Internet Explorer
Pleease va ajuta să generați prefixe versiune furnizor, deoarece animație complexă, acest proces poate fi foarte obositor.
Bonus №1: Retina.js
Mulți dezvoltatori doresc să optimizeze site-urile lor la ecrane de înaltă densitate (DPI). În mod specific Retina.js îl face ușor pentru a include imagini de mari dimensiuni, prin plasarea în proiect retina.js, iar apoi marchează atributul-date at2x imagine indicând o imagine de înaltă calitate:
Bonus №2: crearea de figuri în CSS
Găleți pe hârtie pentru pagina Beta pentru Windows complet eviscerate în CSS. Având în vedere numărul mare de manuale excelente existente CSS nostru a fost surprinzător de simplu. Pentru a crea forme cu unghiuri de cadre sunt utilizate în ea:
Un loc minunat pentru a învăța cum să lucreze cu animație - Treehouse de ea, în cazul în care există un bloc minunat de animații CSS. Este - o parte a Fundației curs CSS. Introducere în CSS Animation și are, de asemenea rețeaua dezvoltatorilor Mozilla Developer Network: Aplicarea de animație CSS (folosind animatii CSS).
Revizie: Echipa webformyself.
HTML5 și CSS3 practica de la zero la rezultatul!
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram
