Share
CodePen este un loc minunat pentru a găsi inspirație și pentru a vedea ce experimente UI nebun au venit cu alții. Pe lângă aceasta, este, de asemenea, un loc util pentru a găsi conținut educațional. În această broșură vom explora câteva exemple reci de CodePens care ne învață despre animația web.
Acest CodPen ilustrează modul în care browserele citesc succesiunea pașilor dintr-un a cadru cheie animaţie.
Când animăm cu CSS, avem o gamă largă de proprietăți de animat. Cu toate acestea, nu toate sunt o idee bună. Animarea proprietăților greșite poate face pentru animații lentă, janky. Acest exemplu de la Ian Hazelton explică modul în care funcționează cele mai eficiente patru proprietăți.
Uneori, un exemplu simplu este tot ce aveți nevoie. Acest exemplu arată modul în care din și la sintaxa poate fi utilizată într-o cheie cheie simplă.
În acest demo JavaScript de la Matt West, vezi cum requestAnimationFrame API-ul poate fi folosit pentru a juca și a întrerupe.
O mare utilizare a comentariilor inline care demonstrează cum să creați două diagrame animate folosind ChartJS.
Un ghid frumos comentat pentru utilizarea Canvas, de Petr Tichy.
Uneori nu aveți nevoie de un GIF redat pentru a obține un efect de animație fantezist. Aceste exemple numai de CSS de la Joey Cheng sunt un exemplu util pentru ceea ce este posibil.
Chris Coyier demonstrează cum se utilizează SVG-urile animateTransform.
Este adesea util să știți când a terminat o animație. Această demonstrație simplă arată modul în care putem folosi JavaScript pentru a afla când se termină o animație.
Un alt mare pentru a marca - acest exemplu arată modul în care putem schimba animațiile folosind mass-media întrebări. Redimensionați ecranul pentru a vedea efectul!
În sfârșit, să vedem viitorul animației SVG cu acest demo care arată cum mișcare-path proprietatea ne permite să creăm căi complexe de mișcare pentru animațiile noastre.
Acestea sunt doar o mână de demo-uri, blog-uri și walkthrough-uri disponibile pe CodePen. CodePen nu este chiar grozav pentru animație; încercați să căutați și veți găsi tot felul de informații și demonstrații excelente care acoperă toate tipurile de subiecte de dezvoltare web. Explorați, învățați și distrați-vă!
Accentsconagua