În ultimii câțiva ani, CSS a introdus o mulțime de caracteristici interesante care fac dezvoltarea web mai distractivă. Unul dintre aceste lucruri este animația CSS3. Înainte de CSS3, animația putea fi implementată numai folosind Javascript.
Astăzi vă vom arăta cum să lucrați cu o bibliotecă CSS3 care va transforma crearea animației într-un proces plăcut și ușor: Animate.css.
Animate.css este o bibliotecă pentru crearea de animații folosind CSS3. Această bibliotecă acceptă mai mult de 50 de efecte de animație diferite, care aproape toate funcționează în browsere diferite, acceptate de CSS3.
Aceste efecte pot fi aplicate textului, imaginilor, formelor și așa mai departe.
Să începemPentru a activa Animate.css, conectați clasele necesare la elementul pagină. Pentru a începe, includeți fișierul animate.css în secțiunea head. Puteți descărca biblioteca din depozitul de pe Github.
În mod implicit, Animate.css redă animația o dată când pagina se încarcă. Pentru a reda animația ciclic, să adăugăm puțin Javascript.
... ...
HTMLMai întâi, trebuie să atribuim clasa .animated elementului dorit, urmată de clasa tipului de animație.
Acest text va anima.
Asta e tot! Acum animația se va reda când pagina se încarcă. Să adăugăm Javascript pentru a reda animația atunci când se declanșează un eveniment. Clasa.option este complet arbitrară, o puteți modifica după cum vă convine.
Setări CSS suplimentareDacă vrem ca animația să nu se oprească sau timpul de execuție al acesteia să fie diferit, atunci trebuie să ajustăm unele valori.
Pentru a derula animația de o n-a sau de un număr infinit de ori, putem ajusta atributul animation-iteration-count. Nu uitați să specificați prefixul browserului pentru webkit, moz etc. Pentru defilare infinită, setați valoarea la infinit .
Dacă trebuie să redăm animația de un anumit număr de ori, atunci o puteți urmări astfel.
Număr-iterație-animație-furnizor: infinit | ;
Pentru a modifica timpul de redare, puteți ajusta proprietățile animației-durată și animației-întârziere. Exemplu:
Opțiune ( -webkit-animation-duration: 3s; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: 5; )
JavascriptPentru a anima în timpul unui eveniment (de exemplu, când faceți clic), vom folosi Javascript. Mai întâi, să adăugăm un link.
Acest text va anima. Click pentru a anima!
Folosind Javascript, putem crea o funcție de animație, căreia îi vom transmite numele clasei de animație:
$(function() ( $("#ref").click(function() ( animate(".demo", "bounce"); return false; )); )); function animate(element_ID, animatie) ( $(element_ID).addClass(animation); var wait = window.setTimeout(function())( $(element_ID).removeClass(animation)), 1300);
Buna ziua. Permiteți-mi să vă reamintesc că am scris deja despre, dar acestea erau doar principii de bază. Acum vă sugerez să vă familiarizați cu un set gata făcut de proprietăți de animație într-un fișier animate.css. Acesta nu este un generator, ci o bibliotecă care funcționează destul de corect în toate browserele populare. Și poți să te uiți la aceste exemple.
Se conectează Animate.cssDacă doriți să faceți o animație CSS a unei imagini, text sau butoane pentru un site web și să implementați toate acestea fără a utiliza Javascript, atunci trebuie doar să conectați un fișier, care a fost deja menționat mai sus, într-un mod standard, adică între etichetele capului.
Acesta este modul în care sunt specificate proprietățile de animație ale obiectelor. , animat este necesar, iar tada este unul dintre efecte. Dar avem nevoie de ciclul în sine și acum o vom face. Acest lucru se poate face prin crearea unei noi clase și atribuirea de proprietăți speciale acesteia sau uneia existente.
Animație în buclă Animate.css| .nou (animație-iterație-număr: infinit ; ) |
Nou(animație-iterație-număr: infinit;)
Și pentru a vă fi și mai clar ceea ce încercam să explic aici, urmăriți acest videoclip, unde vă demonstrez clar, cu un exemplu real, cum funcționează și, de asemenea, descărcați stilurile în sine.
Din ce în ce mai mult, pe multe pagini de destinație sau pagini promoționale, puteți găsi diverse efecte de animație. La urma urmei, fac pagina mai interesantă și mai atractivă.
Practic, aceste efecte sunt setate fie pe un anumit eveniment (dați clic sau treceți cu mouse-ul pe un element), fie în momentul derulării paginii. Cred că ați dat peste astfel de site-uri, la derularea paginii, diverse elemente apar lin și frumos.
Anterior, pentru a implementa aceste efecte, trebuia să folosești doar JS, dar dezvoltarea nu stă pe loc și odată cu lansarea CSS3, toate aceste efecte pot fi implementate pe acesta.
În această lecție vă vom prezenta un instrument foarte interesant numit animate.css. Aceasta este o foaie de stil CSS gata făcută, care are peste 50 de efecte diferite în arsenalul său și toate aceste efecte sunt implementate în CSS3.
Pentru a-l folosi, trebuie doar să setați o anumită clasă pentru elementul necesar și un efect de animație va fi aplicat acestui element. După cum am spus mai devreme, această animație este implementată în CSS3, astfel încât aceste efecte vor funcționa în toate browserele moderne.
Acum să aruncăm o privire mai atentă la animate.css.
Markup HTML de bazăUrmărește tutorialul video
- sări
- flash
- puls
- banda de cauciuc
- scutura
- leagăn
- se clătina
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- bounceOut
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- bounceOutUp
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedIn
- lightSpeedOut
- rotateIn
- rotiți în jos la stânga
- rotiți în jos la dreapta
- rotateInUpLeft
- rotateInUpRight
- rotateOut
- rotițiOutDownLeft
- rotiți în afara în jos la dreapta
- rotițiOutUpLeft
- rotateOutUpRight
- balama
- rollIn
- rola
- a mari
- zoomInDown
- zoomInStânga
- zoomInRight
- zoomInUp
- a micsora
- zoom OutDown
- zoomOutStânga
- zoomOutDreapta
- zoomOutUp
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
Dacă ați făcut totul așa cum este descris mai sus, atunci când pagina se încarcă, acest efect va fi aplicat elementului și gata, animația se va termina acolo.
Dar dacă aveți nevoie ca animația să continue fără oprire?
Pentru a face acest lucru, trebuie doar să adăugați o altă clasă pentru elementul nostru animat. Această clasă este infinită.
Titlu
Setați animația când treceți mouse-ul peste un element
Urmărește tutorialul video
Toate exemplele descrise anterior setează animația imediat după încărcarea paginii, dar în practică acest lucru este rareori necesar. În practică, este de foarte multe ori necesar să setați o animație atunci când treceți cu mouse-ul peste un element și, prin urmare, mai jos am furnizat codul gata făcut pentru această implementare.
HTMLMarcajul nostru HTML s-a schimbat puțin, acum nu trebuie să specificăm o clasă care este responsabilă pentru o anumită animație. Trebuie să specificăm această valoare în atributul special data-effect. Vă rugăm să acordați atenție acestui lucru, este foarte important.
Titlu
Iată un mic cod jQuery care va monitoriza evenimentul mouseover și dacă acest eveniment are loc, scriptul îi va adăuga o clasă, a cărei valoare este specificată în atributul data-effect. Prin adăugarea acestei clase, se va aplica animația.
Funcția animate(elem)( efect var = elem.data(„efect”); if(!efect || elem.hasClass(efect)) returnează false; elem.addClass(efect); setTimeout(funcție())( elem. removeClass (efect); 1000); $(".animated").mouseenter(function() ( animate($(this)); ));
Desigur, puteți schimba acest script după cum doriți, de exemplu, puteți schimba evenimentul mouse-enter pentru a face clic în el. Apoi, în acest caz, animația nu va avea loc în momentul în care mouse-ul trece peste element, ci în momentul clicului.
Realizarea de animație la derularea paginiiUrmărește tutorialul video
Și, în sfârșit, să ne uităm la un alt exemplu în care puteți utiliza cu ușurință animate.css.
Și anume, puteți seta diferite efecte pentru elemente atunci când derulați pagina. În aceste scopuri, pe lângă animate.css, vom avea nevoie și de un script wow.js special.
Animația CSS3 face site-urile web dinamice. Dă viață paginilor web, îmbunătățind experiența utilizatorului. Spre deosebire de tranzițiile CSS3, crearea animației se bazează pe cadre cheie, care vă permit să redați și să repetați automat efectele pentru un anumit timp, precum și să opriți animația într-o buclă.
Animația CSS3 poate fi folosită pentru aproape toate elementele html, precum și pentru pseudoelementele:before și:after. Lista proprietăților animate este dată pe pagină. Când creați animații, nu uitați de posibilele probleme de performanță, deoarece modificarea unor proprietăți necesită o mulțime de resurse.
Introducere în animația CSS Suport pentru browserIE: 10,0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera mini: -
Browser Android: 44, 4.1 -webkit-
Chrome pentru Android: 44
Cadrele cheie sunt folosite pentru a specifica valorile proprietăților animației în diferite puncte ale animației. Cadrele cheie definesc comportamentul unui ciclu de animație; animația se poate repeta de zero sau de mai multe ori.
Cadrele cheie sunt specificate folosind regula @keyframes, definită după cum urmează:
Numele animației @keyframes (lista de reguli)
Crearea unei animații începe prin a seta cadrele cheie ale regulii @keyframes. Cadrele determină ce proprietăți vor fi animate la ce pas. Fiecare cadru poate include unul sau mai multe blocuri de declarații ale uneia sau mai multor perechi de proprietăți și valori. Regula @keyframes conține numele animației elementului, care leagă regula și blocul de declarare al elementului.
@keyframes shadow (de la (text-shadow: 0 0 3px black;) 50% (text-shadow: 0 0 30px black;) la (text-shadow: 0 0 3px black;) )
Cadrele cheie sunt create folosind cuvintele cheie de la și către (echivalentul valorilor 0% și 100%) sau folosind puncte procentuale, care pot fi specificate câte doriți. De asemenea, puteți combina cuvinte cheie și puncte procentuale. Dacă cadrele au aceleași proprietăți și valori, acestea pot fi combinate într-o singură declarație:
@keyframes muta ( de la, la ( sus: 0; stânga: 0; ) 25%, 75% (sus: 100%;) 50% (sus: 50%;) )
Dacă nu sunt specificate cadre 0% sau 100%, atunci browserul utilizatorului le creează folosind valorile calculate (setate inițial) ale proprietății animate.
Dacă sunt definite mai multe reguli @keyframes cu același nume, ultima din ordinea documentului se va declanșa și toate cele anterioare vor fi ignorate.
Odată ce regula @keyframes este declarată, o putem face referire în proprietatea animație:
H1 (dimensiunea fontului: 3.5em; culoare: magenta închis; animație: umbră 2s ușurință infinită de intrare; )
Nu este recomandat să animați valori non-numerice (cu rare excepții), deoarece rezultatul în browser poate fi imprevizibil. De asemenea, nu ar trebui să creați cadre cheie pentru valorile proprietăților care nu au un punct de mijloc, cum ar fi valorile proprietăților culoare: roz și culoare: #ffffff , lățime: automat și lățime: 100px sau rază-chenar: 0 și chenar- rază: 50% (în acest caz, ar fi corect să specificați raza-chenar: 0%).
1.1. Funcție de sincronizare pentru cadrele cheieO regulă de stil de cadru cheie poate declara și o funcție temporară care ar trebui utilizată atunci când animația trece la următorul cadru cheie.
Exemplu
@keyframes bounce ( de la ( sus: 100px; animation-timing-function: ease-out; ) 25% (sus: 50px; animation-timing-function: ease-in; ) 50% (sus: 100px; animation-timing- funcția: ease-out; 75% (sus: 75px; animație-timing-funcție: ease-in; ) la (sus: 100px; ) )
Sunt specificate cinci cadre cheie pentru animația numită „bounce”. Între primul și al doilea cadru cheie (adică între 0% și 25%), este utilizată funcția de relaxare. Între al doilea și al treilea cadru cheie (adică între 25% și 50%), este utilizată funcția de accelerare lină. Și așa mai departe. Elementul se va deplasa în sus pe pagină cu 50 px, încetinind pe măsură ce atinge punctul cel mai înalt, apoi accelerând când scade la 100 px. A doua jumătate a animației se comportă în mod similar, dar mută elementul doar 25 px în sus pe pagină.
Funcția de sincronizare specificată în cadrul cheie to sau 100% este ignorată.
2. Nume animație: proprietatea animație-nameProprietatea animation-name specifică lista de animații aplicate elementului. Fiecare nume este folosit pentru a selecta un cadru cheie într-o regulă care oferă valori de proprietate pentru animație. Dacă numele nu se potrivește cu niciun cadru cheie din regulă, nu există proprietăți de animat sau nu există un nume de animație, animația nu se va executa.
Dacă mai multe animații încearcă să schimbe aceeași proprietate, se va executa animația cea mai apropiată de sfârșitul listei de nume.
Numele animației face distincție între majuscule și minuscule, iar cuvântul cheie none nu este permis. Este recomandat să folosiți un nume care să reflecte esența animației și puteți utiliza unul sau mai multe cuvinte enumerate cu o cratimă - sau caracterul de subliniere _ .
Proprietatea nu este moștenită.
Sintaxă
Nume animație: niciunul; animatie-nume: test-01; animatie-nume: -glisare; animație-nume: mișcare-vertical; animatie-nume: test2; animatie-name: test3, move4; animatie-nume: initiala; animatie-nume: mostenire;
3. Durata animației: proprietatea animație-duratăProprietatea animation-duration specifică durata unui ciclu de animație. Specificat în secunde s sau milisecunde ms. Dacă un element are mai multe animații specificate, puteți seta un timp diferit pentru fiecare listând valorile separate prin virgule.
Proprietatea nu este moștenită.
Sintaxă
Animație-durată: .5s; animatie-durata: 200ms; animație-durată: 2s, 10s; animatie-durata: 15s, 30s, 200ms;
4. Funcția de sincronizare: proprietatea animație-timing-funcțieProprietatea animation-timing-function descrie modul în care animația va progresa între fiecare pereche de cadre cheie. În timpul întârzierii animației, funcțiile de sincronizare nu sunt aplicate.
Proprietatea nu este moștenită.
| Valori: | |
| liniar | Funcție liniară, animația are loc uniform pe tot parcursul timpului, fără fluctuații de viteză. |
| uşura | Caracteristica implicită, animația începe lent, accelerează rapid și încetinește la sfârșit. Corespunde cubic-bezier(0.25,0.1,0.25,1) . |
| ușurință | Animația începe lent și apoi se accelerează ușor la sfârșit. Corespunde cubic-bezier(0,42,0,1,1) . |
| uşurare | Animația începe rapid și încetinește ușor la sfârșit. Corespunde cubic-bezier(0,0,0.58,1) . |
| ușurință-in-out | Animația începe încet și se termină încet. Corespunde cubic-bezier(0,42,0,0,58,1) . |
| cubic-bezier(x1, y1, x2, y2) | Vă permite să setați manual valori de la 0 la 1. Puteți construi orice traiectorie a vitezei de schimbare a animației. |
| pas-start | Setează animația pas cu pas, împărțind animația în segmente, modificările apar la începutul fiecărui pas. Evaluat în pași (1, start) . |
| sfârşitul pasului | Animație pas cu pas, modificările apar la sfârșitul fiecărui pas. Evaluat în pași (1, final) . |
| pași (număr de pași, poziție pas) | O funcție de timp de pas care ia doi parametri. Primul parametru specifică numărul de intervale din funcție. Acesta trebuie să fie un număr întreg pozitiv mai mare decât 0, cu excepția cazului în care al doilea argument este jump-none, caz în care trebuie să fie un număr întreg pozitiv mai mare decât 1. Al doilea parametru, care este opțional, specifică poziția pasului - punctul în care începe animația, folosind una dintre următoarele valori:
Odată cu startul valorii, animația începe la începutul fiecărui pas, cu valoarea finală la sfârșitul fiecărui pas cu o întârziere. Latența se calculează împărțind timpul de animație la numărul de pași. Dacă al doilea parametru nu este specificat, se utilizează valoarea implicită end. |
| iniţială | |
| moşteni |
Sintaxă
Animație-sincronizare-funcție: ușurință; animație-funcție de sincronizare: ease-in; animație-funcție de sincronizare: ease-out; animație-funcție de sincronizare: ease-in-out; animatie-functie de sincronizare: liniar; animație-funcție-temporizare: step-start; animatie-functie-timing: pas-sfarsit; animație-funcție de sincronizare: cubic-bezier(0.1, 0.7, 1.0, 0.1); animație-funcție de sincronizare: pași(4, final); animație-funcție de sincronizare: ease, step-start, cubic-bezier (0.1, 0.7, 1.0, 0.1); animatie-functie-timing: initiala; animatie-functie de sincronizare: mostenire;
Animația pas cu pas poate fi folosită pentru a crea efecte interesante, cum ar fi textul imprimat sau un indicator de încărcare.
5. Repetiția animației: proprietatea animație-iterație-numărProprietatea animation-iteration-count specifică de câte ori este redată bucla de animație. O valoare de pornire de 1 înseamnă că animația se va reda de la început până la sfârșit o dată. Această proprietate este adesea folosită împreună cu valoarea alternativă a proprietății animație-direcție, ceea ce face ca animația să fie redată în ordine inversă în bucle alternative.
Proprietatea nu este moștenită.
Sintaxă
Animație-iterație-număr: infinit; animație-număr-iterație: 3; animație-iterație-număr: 2,5; animație-iterație-număr: 2, 0, infinit;
6. Direcția animației: proprietatea direcției animațieiProprietatea animație-direcție determină dacă animația ar trebui să fie redată în ordine inversă pe unele sau pe toate buclele. Când animația este redată în ordine inversă, funcțiile de sincronizare sunt de asemenea inversate. De exemplu, atunci când este redată în ordine inversă, funcția ease-in se va comporta ca ease-out .
Proprietatea nu este moștenită.
| Valori: | |
| normal | Toate animațiile se repetă după cum este specificat. Valoare implicită. |
| verso | Toate repetările animației se joacă în direcția opusă modului în care au fost definite. |
| alterna | Fiecare repetare impară a buclei de animație este redată în direcția normală, fiecare repetare pară este redată în direcția inversă. |
| alternativ-invers | Fiecare repetare impară a buclei de animație este redată în direcția inversă, fiecare repetiție pară este redată în direcția normală. |
| iniţială | Setează valoarea proprietății la valoarea implicită. |
| moşteni | Moștenește valoarea proprietății de la elementul părinte. |
Pentru a determina dacă o repetare a buclei de animație este pară sau impară, numărul de repetări începe de la 1.
Sintaxă
Animație-regie: normal; animație-direcție: invers; animație-regie: alternativă; animație-direcție: alternativ-revers; animație-direcție: normal, invers; animație-direcție: alternativă, inversă, normală; animatie-regia: initiala; animație-direcție: moștenire;
7. Redarea animației: proprietatea animation-play-stateProprietatea animation-play-state determină dacă animația va începe sau va întrerupe. Oprirea animației într-o buclă este posibilă folosind această proprietate într-un script JavaScript. De asemenea, puteți opri animația când treceți mouse-ul peste un obiect - state:hover .
Proprietatea nu este moștenită.
Sintaxă
Animație-play-stare: alergare; animație-play-stare: pauză; animație-play-stare: pauză, alergare, alergare; animatie-play-stare: initiala; animație-play-stare: moștenire;
8. Întârziere animație: proprietate animație-întârziereProprietatea animation-delay determină când va începe animația. Specificat în secunde s sau milisecunde ms.
Proprietatea nu este moștenită.
Sintaxă
Animație-întârziere: 5s; animație-întârziere: 3s, 10ms;
9. Starea elementului înainte și după redarea animației: proprietate animation-fill-modeProprietatea animation-fill-mode determină ce valori sunt aplicate de animație în afara timpului său de execuție. Când animația se termină, elementul revine la stilurile sale originale. În mod implicit, animația nu afectează valorile proprietăților atunci când animația este aplicată unui element - animation-name și animation-delay . În plus, în mod implicit, animațiile nu afectează valorile proprietăților animație-durată și animație-iterație-număr după ce sunt finalizate. Proprietatea animation-fill-mode poate suprascrie acest comportament.
Proprietatea nu este moștenită.
| Valori: | |
| nici unul | Valoare implicită. Starea elementului nu se schimbă înainte sau după redarea animației. |
| înainte | Odată ce animația se termină (după cum este determinată de valoarea animației-iterație-număr), animația va aplica valorile proprietăților în momentul în care se termină animația. Dacă animația-iterație-număr este mai mare decât zero, se aplică valorile pentru sfârșitul ultimei iterații finalizate a animației (nu valoarea pentru începutul iterației care urmează). Dacă animation-iteration-count este zero, valorile aplicate vor fi cele care pornesc prima iterație (la fel ca în animation-fill-mode: înapoi;). |
| înapoi | În perioada definită cu animation-delay, animația va aplica valorile proprietăților definite în cadrul cheie, care va începe prima iterație a animației. Acestea sunt fie valorile de la cadru-cheie (când direcția animație: normală sau direcția animației: alternativă), fie valorile cadru-cheie către valorile (când direcția animației: inversă sau direcția animației: alternativă). |
| ambii | Vă permite să lăsați un element în primul cadru cheie înainte de a începe animația (ignorând o valoare pozitivă de întârziere) și să întârziați ultimul cadru până la sfârșitul ultimei animații. |
Sintaxă
Animație-umplere-mod: niciunul; animation-fill-mode: înainte; animation-fill-mode: înapoi; animație-fill-mode: ambele; animation-fill-mode: niciunul, înapoi; animation-fill-mode: ambele, înainte, niciunul;
10. Scurtă descriere a animației: proprietatea animațieiToți parametrii de redare a animației pot fi combinați într-o singură proprietate - animație, listându-i separați printr-un spațiu:
animație: animație-nume animație-durată animație-funcție de sincronizare animație-întârziere animație-iterație-număr animație-direcție;
Pentru a reda animația, este suficient să specificați doar două proprietăți - animation-name și animation-duration , proprietățile rămase își vor lua valorile implicite. Ordinea în care sunt listate proprietățile nu contează, singurul lucru este că timpul de execuție al animației-durata trebuie să vină înainte de întârzierea animației-întârziere.
11. Animații multiplePuteți seta mai multe animații pentru un element, listând numele lor separate prin virgule:
Div (animație: umbră 1s ease-in-out 0,5s alternativ, mutare 5s liniară 2s;)
| 18.02.2016
CSS3 deschide posibilități nelimitate pentru designerii de UI, iar principalul avantaj este că aproape orice idee poate fi implementată și adusă la viață cu ușurință fără a recurge la utilizarea JavaScript.
Este uimitor cât de simple lucruri pot anima o pagină web obișnuită și o pot face mai accesibilă pentru utilizatori. Vorbim despre tranziții CSS3, cu care poți permite unui element să se transforme și să schimbe stilul, de exemplu, la hover. Cele nouă exemple de animație CSS3 disponibile mai jos vă vor ajuta să creați o senzație de receptivitate pe site-ul dvs., precum și să îmbunătățiți aspectul general al paginii cu tranziții frumoase și netede.
Pentru informații mai detaliate, puteți descărca arhiva cu fișiere.
Toate efectele funcționează folosind proprietatea de tranziție. tranziție- „tranziție”, „transformare”) și pseudo-clasa:hover, care determină stilul elementului atunci când cursorul mouse-ului trece peste el (în tutorialul nostru). Pentru exemplele noastre, am folosit un div de 500x309 px, o culoare inițială de fundal de #6d6d6d și o durată de tranziție de 0,3 secunde.
Corp > div ( lățime: 500px; înălțime: 309px; fundal: #6d6d6d; -webkit-transition: toate 0.3s ease;; -moz-transition: toate 0.3s ease;; -o-transition: toate 0.3s ease;; tranziție: toate 0.3s ușurință)
1. Schimbați culoarea la hoverPe vremuri, implementarea unui astfel de efect a fost o treabă destul de minuțioasă, cu calcule matematice ale anumitor valori RGB. Acum tot ce trebuie să faceți este să scrieți un stil CSS în care trebuie să adăugați o pseudo-clasă:hover la selector și să setați o culoare de fundal care va înlocui fără probleme (în 0,3 secunde) culoarea originală de fundal atunci când treceți cu mouse-ul peste bloc :
Culoare: hover ( fundal:#53ea93; )
2. Aspectul cadruluiO transformare interesantă și izbitoare este cadrul interior care apare fără probleme atunci când treceți cu mouse-ul. Potrivit pentru decorarea diverselor nasturi. Pentru a obține acest efect, folosim pseudo-class:hover și proprietatea box-shadow cu parametrul inset (setează umbra în interiorul elementului). În plus, va trebui să setați întinderea umbrei (în cazul nostru este de 23 px) și culoarea acesteia:
Border:hover (box-shadow: insert 0 0 0 23px #53ea93; )
3. LeagănAceastă animație CSS este o excepție, deoarece proprietatea de tranziție nu este folosită aici. În schimb am folosit:
- @keyframes este o directivă de bază pentru crearea animației CSS cadru cu cadru, care vă permite să faceți așa-numita. storyboard și descrie animația ca o listă de puncte cheie;
- animation and animation-iteration-count - proprietati pentru setarea parametrilor de animatie (durata si viteza) si numarul de cicluri (repetitii). În cazul nostru, repetați 1.
Efectul de estompare este în esență o simplă schimbare a transparenței unui element. Animația este creată în două etape: mai întâi trebuie să setați starea inițială de transparență la 1 - adică opacitatea completă, apoi specificați valoarea acesteia atunci când treceți mouse-ul - 0,6:
Fade ( opacitate: 1; ) .fade:hover ( opacitate: 0,6; )
Pentru rezultatul opus, schimbați valorile:
5. MărirePentru a mări blocul atunci când trecem cu mouse-ul deasupra, vom folosi proprietatea transform și o vom seta la scale(1.2) . În acest caz, blocul va crește cu 20 la sută, menținându-și proporțiile:
Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )
6. ReducereA face un element mai mic este la fel de ușor ca și a-l mări. Dacă în al cincilea punct pentru a crește scara trebuia să specificăm o valoare mai mare decât 1, atunci pentru a reduce blocul vom specifica pur și simplu o valoare care va fi mai mică de unu, de exemplu, scale(0,7) . Acum, când treceți mouse-ul, blocul se va micșora proporțional cu 30% din dimensiunea sa inițială:
Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )
7. Transformarea în cercUna dintre animațiile utilizate în mod obișnuit este un element dreptunghiular care se transformă într-un cerc atunci când trece cu mouse-ul deasupra. Folosind proprietatea CSS border-radius, folosită împreună cu :hover și transition , acest lucru poate fi realizat fără probleme:
Cerc: hover ( raza de frontieră: 70%; )
8. RotireO opțiune de animație distractivă este să rotiți un element cu un anumit număr de grade. Pentru a face acest lucru, vom avea nevoie din nou de proprietatea transform, dar cu o valoare diferită - rotateZ(20deg) . Cu acești parametri, blocul va fi rotit cu 20 de grade în sensul acelor de ceasornic față de axa Z:
Rotire:hover ( -webkit-transform: rotireZ(20deg); -ms-transform: rotireZ(20deg); transformare: rotireZ(20deg); )
9. Umbra 3DOpiniile designerilor diferă dacă acest efect este adecvat în designul plat. Cu toate acestea, această animație CSS3 este destul de originală și este folosită și pe paginile web. Vom obține un efect tridimensional utilizând proprietățile deja familiare box-shadow (va crea o umbră cu mai multe straturi) și vom transforma cu parametrul translateX(-7px) (va asigura o deplasare orizontală a blocului la stânga cu 7 pixeli). ):
Threed:hover (box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 6px 6px #53ea93, 5pxlate 7px: -transform: -7pxlate 93; -7px); transformare: translateX(-7px)
Suport pentru browserUrmătoarele browsere acceptă în prezent proprietatea de tranziție:
| Internet Explorer | Sprijinit de IE 10 și mai sus |
| Crom | Suportat din versiunea 26 (până când versiunea 25 funcționează cu prefixul -webkit-) |
| Firefox | Suportat din versiunea 16 (în versiunile 4-15 funcționează cu prefixul -moz-) |
| Operă | Suportat din versiunea 12.1 |
| Safari | Suportat din versiunea 6.1 (în versiunile 3.1-6 funcționează cu prefixul -webkit-) |
Proprietățile rămase utilizate în aceste exemple, cum ar fi transform , box-shadow etc., sunt, de asemenea, acceptate de aproape toate browserele moderne. Cu toate acestea, dacă intenționați să utilizați aceste idei pentru proiectele dvs., vă recomandăm insistent să verificați din nou compatibilitatea între browsere.
Sperăm că ați găsit utile aceste exemple de animație CSS3. Vă dorim succes creativ!
