De Web ass gefëllt mat erstaunlech an hypnotesch Animatiounen. Haut benotzen d'Entwéckler eng grouss Varietéit vun Techniken fir Engagement ze kreéieren, z'ënnerhalen an d'Web Benotzer z'informéieren, an Animatioun hëlleft eis dëst Zil z'erreechen.
Virun 10 Joer hunn d'Entwéckler Adobe Flash benotzt fir Interaktivitéit op hir Siten ze addéieren, awer mam Advent vun HTML5, CSS3 an enger Onmass vu JavaScript Bibliothéiken ass Flash (glécklecherweis) aus der Landschaft verschwonnen.
Et gëtt eng grouss Quantitéit vun Animatiounsbibliothéik an ech wäert Iech 9 vun hinnen presentéieren, no 3 Critèren: Einfachheet vun der Ëmsetzung, ugebueden Features a Popularitéit.

Animate.css

Animate.css ass eng vun den effizientesten an einfachsten ze benotzen CSS Bibliothéiken verfügbar. Et ass einfach ze implementéieren well et duer geet d'CSS Klassen un d'HTML Elementer ze addéieren.

Auteur: Daniel Eden
Release Datum: 2013
Aktuell Versioun: 3.4.0
Popularitéit: 25,000+ Stären op GitHub
Beschreiwung: "Eng Cross-Browser CSS Animatiounsbibliothéik. Einfach wéi e Patt. "
Bibliothéik Gréisst: 55.2 kB
GitHub: https://github.com/daneden/animate.css
Lizenz: MIT

Animate.css ass ee vun de populäersten a wäit benotzten a liicht genuch fir op mobilen Siten ze benotzen. Perséinlech mengen ech et ass eng vun de beschten Animatiounsbibliothéiken an ech recommandéieren et fir Ären nächste Projet.

Bounce.js

Bounce.js ass e Javascript-Tool a Bibliothéik déi sech op "bouncing" Animatioune fir Är Websäit konzentréiert. Bounce.js ass en Open-Source Projet mat sengem Quellcode op GitHub.

Auteur: Tictail
Release Datum: 2014
Aktuell Versioun: 0.8.2
Popularitéit: 3,500+ Stären op GitHub
Beschreiwung: "Erstellt schéin CSS3 ugedriwwen Animatiounen an engem Blitz. "
Bibliothéik Gréisst: 16 kB
GitHub: https://github.com/tictail/bounce.js
Lizenz: MIT

Bounce.js ass eng gutt Animatiounsbibliothéik déi ongeféier zéng virdefinéiert Animatiounen enthält, wat seng Liichtegkeet erkläert. Wéi animate.css, sinn d'Animatiounen glat a flawless. Recommandéiert wann Dir keng grouss Varietéit vun Animatioun braucht an d'Liichtegkeet vun der Bibliothéik ass e Verméigen fir Äre Projet.

Magic Animations

Magic Animations ass eng vun den beandrockendsten Bibliothéiken. Et gi vill Animatiounen, e puer vun deenen sinn komplett eenzegaarteg. Wéi mat Animate.css, kënnt Dir Magic implementéieren andeems Dir einfach d'CSS-Datei importéiert. Dëse Projet bitt eng besonnesch erfollegräich Demo.

Magic Animations
Auteur: Christian
Release Datum: 2014
Aktuell Versioun: 1.1.0
Popularitéit: 3,400+ Stären op GitHub
Beschreiwung: "CSS3 Animatioune mat Spezialeffekter"
Bibliothéik Gréisst: 36.5 kB
GitHub: https://github.com/miniMAC/magic

D'Gréisst vun magesch Animatiounen bleift raisonnabel am Verglach zu Animate.css a gouf berühmt fir e puer speziell Effekter wéi magesch Effekter, domm Effekter a bomb Effekter.
Wann Dir no eppes Aussergewéinleches sicht, empfeelen ech definitiv et fir Ären nächste Projet ze kucken. Dir wäert net enttäuscht ginn.

DynCSS

DynCSS ass d'Aart vun Animatiounsbibliothéik déi Dir gären op Äre Site benotze wëllt fir de Parallaxeffekt ze benotzen. Fir eng Iddi ze kréien wat et Iech erlaabt ze maachen, kuckt op dës Demo.

Schëpfer: Vittorio Zaccaria, Autor vun "Notes fir Besser Mobile Applikatioun Interfaces ze designen" an "3D Spiller entwéckelen mat Unity 5"
Publikatiounsdatum: 2014
Aktuell Versioun: 0.8.1
Popularitéit: 190+ Stären op GitHub
Beschreiwung: "Bréngt Äre Site zum Liewen mat Dynamic CSS. "
GitHub: https://github.com/vzaccaria/DynCSS

DynCSS ass eng einfach Bibliothéik déi an der nächster Zukunft populär ka ginn, awer ass ëmmer nach e rezente Projet wéi beweist duerch d'Stärebewäertung op Github. Ee vun de coolen Features ass datt d'Bibliothéik Elementer op Basis vu Scrolling animéiert bitt, wat de Vittorio elegant op der DynCSS Homepage demonstréiert (déi vill Parallax benotzt).

CSShake

CSShake mécht genau wat et op der Këscht seet, eng CSS Bibliothéik fir Är Websäit Elementer z'erwëschen. Wéi Dir kéint erwaarden, ginn et vill Variatiounen fir all Webkomponenten ze schüttelen

Auteur: Lionel
Release Datum: 2014
Popularitéit: 2,000+ Stären op GitHub
Beschreiwung: "CSS Klassen fir Är DOM ze réckelen!"
Bibliothéik Gréisst: 78.8 kB
GitHub: https://github.com/elrumordelaluz/csshake
Lizenz: MIT

Apple huet den UI-Trend populariséiert fir UI Elementer kräfteg ze schüttelen (Dialogbox, Modalfenster, Textbox) wann de Benotzer eng falsch Äntwert agitt - bezitt sech op eng Persoun déi de Kapp rëselt fir "Nee" ze soen. CSShake bitt eng Rei vun interessanten "shake" Animatiounen an d'Bibliothéik huet kee Mangel u Varianten.
Och wann dës Bibliothéik méi populär ass wéi DynCSS, mengen ech datt d'Gréisst net gerechtfäerdegt ass duerch déi zousätzlech Funktiounen déi se bréngt. Och wann d'Animatiounen gutt sinn, kann ech mer keng Fäll virstellen, wou et net néideg wier fir aner Bibliothéiken fir all net-schüttlech Effekter ze enthalen.
Awer vläicht feelt et mir just Phantasie?

Hover.css

Hover.css ass eng CSS Animatiounsbibliothéik entwéckelt fir mat Knäppercher an aner UI Komponenten op Ärer Websäit ze benotzen. Et bitt schéin 2D Iwwergäng, mat enger Onmass vun Duerchduechte Animatiounen.

Auteur: Ian Lunn
Release Datum: 2014
Aktuell Versioun: 2.0.2
Popularitéit: 10,700+ Stären op GitHub
Beschreiwung: "Einfach op Är Projeten uwenden, änneren oder ... just fir Inspiratioun. "
Bibliothéik Gréisst: 104.2 kB
GitHub: https://github.com/IanLunn/Hover
Lizenz: MIT

Hover.css ass besonnesch gëeegent fir Säitenelementer wéi Knäppercher, Logoen, SVG Komponenten oder Biller ze animéieren wéi op der Homepage vun der Bibliothéik ernimmt. Et huet eng ustrengend Lëscht vun Animatiounen, déi seng grouss Gréisst erkläert (ech mengen och datt seng Gréisst weider optimiséiert ka ginn). Vläicht ass de bemierkenswäertsten Effekt d'Sprachblasen a Schleifen.

Velocity.js

Velocity.js ass eng sophistikéiert JavaScript-Bibliothéik fir Animatiounen wéi Fade & Slide, Scroll, Stop, Finish, Reverse a vill méi.
Si huet eng grouss Lëscht vu Benotzer mat Firmen wéi Tumblr, WhatsApp, MailChimp, Scribd, Gap, an HTC an hirer Lëscht.

Auteur: Julian Shapiro
Release Datum: 2014
Aktuell Versioun: 1.2.2
Popularitéit: 8,700+ Stären op GitHub
Beschreiwung: "Schnell JavaScript Animatiounen. "
Bibliothéik Gréisst: 34.8 kB
GitHub: https://github.com/julianshapiro/velocity
Lizenz: MIT

Geschwindegkeet ass net onbedéngt fir jiddereen gëeegent well et e JavaScript Animatiounsmotor ass an dësen JavaScript Animatiounsmotor benotzt déiselwecht API wéi jQuery $.animate (). Et funktionnéiert mat an ouni d'Präsenz vu jQuery. De Grond firwat ech et néideg gefillt hunn et an dëser Lëscht opzehuelen ass datt et onheemlech séier ass a Faarfanimatioun huet, Transformatiounen, Loops, Erliichterung - et ass dat Bescht vu jQuery an CSS Iwwergäng kombinéiert.

favico.js

Flavico ass fir e ganz spezifesche Benotzungsfall entworf: Dës Bibliothéik erlaabt Iech einfach Badge Animatiounen op Är Favicons ze addéieren, Badges sinn eppes potenziell ganz variéiert. Webapps, déi hir Benotzer iwwer d'Präsenz vum aktualiséierten Inhalt musse matdeelen (zum Beispill: nei Tweets, E-Mailen, Posts, Artikelen, asw.) kënnen dës elegant Bibliothéik ganz gutt notzen. Maacht e Bléck op hire Site fir besser ze verstoen wat dëse Kader Iech erlaabt ze maachen.

Auteur: Miroslav Magda
Release Datum: 2013
Aktuell Versioun: 0.3.9
Popularitéit: 4,900+ Stären op GitHub
Beschreiwung: "Benotzt Är Favicons mat Badges, Biller oder Videoen. "
Bibliothéik Gréisst: 8.9 kB
GitHub: https://github.com/ejci/favico.js
Lizenz: MIT

Favicon.js ass méi vun engem Animatiouns-Utility gëeegent fir Badges, Biller a Videoen. D'Gréisst vun der Bibliothéik ass gutt fir d'Produktiounsnotzung optimiséiert.

AniJS

Déi nächst Bibliothéik ass interessant wéinst hirem eenzegaartegen Usaz. AniJS ass eng Animatiounsbibliothéik, déi et erlaabt, Animatiounen zu Elementer mat enger DSL ( Domain-Specific Language ) wéi follegt bäizefügen:

Wann klickt, Op Square, Do wobble animéierten Ze .container-Box

Auteur: anijs
Release Datum: 2014
Aktuell Versioun: 0.9.3
Popularitéit: 2,500+ Stären op GitHub
Beschreiwung: "Eng Bibliothéik fir Äre Webdesign ze erhéijen ouni Kodéierung. "
Bibliothéik Gréisst: 10.5 kB
GitHub: https://github.com/anijs/anijs
Lizenz: MIT

AniJS ass eng raisonnabel grouss Bibliothéik, wat seng Funktionalitéit berücksichtegt. D'Ëmsetzungsformat ass ganz anescht am Verglach mat aneren Animatiounsbibliothéiken (déi heiansdo obskur schéngen). Dës Bibliothéik ass et wäert ze probéieren, op d'mannst eemol fir Är Projeten. Et ass richteg datt et ganz kleng schéngt am Verglach zu der Konkurrenz awer et huet d'Potenzial fir an Zukunft ze wuessen.

Conclusioun

Et gi vill Bibliothéike waarden fir an Äre Projeten ëmgesat ze ginn. Déi hei uewen presentéiert sinn eng Auswiel vun de beschte Kombinatioune vu Raffinesséierung a Stabilitéit. Och wann Dir eng Animatiounsbibliothéik an Äre Projete benotzt, kann d'Interaktivitéit sécherlech verbesseren, wann se mëssbraucht gëtt, produzéiert d'Animatioun de Géigendeel Effekt op dat erwaart a verwiesselt de Benotzer. Sidd virsiichteg a benotzt et clever.
An Dir, wat sinn Är Liiblings Animatiounsbibliothéiken?
Original Artikel de Tanay Pant
www.sitepoint.com/top-9-animation-libraries-use-2016/
Iwwersat aus Englesch vum JS Staff
Antoine @JS-Republic

[Trennungstyp ="" Gréisst ="" Ikon = "Stär"] [actionbox Faarf = "Standard" Titel ="" Beschreiwung ="JS-REPUBLIC ass eng Servicefirma spezialiséiert op JavaScript Entwécklung. Mir sinn eng guttgeheescht Training Zentrum. Fannt all eis technesch Formatiounen op eisem Partner Site gewidmet fir Training” btn_label=”Eis Training” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external = "1"]