Animate.css ass elo e puer Joer ronderëm an ech muss zouginn datt ech ganz spéit op d'Party sinn. Ech hunn et nëmmen e puer Méint entdeckt wärend ech am Netz no e puer CSS Animatioun Tutorials gesicht hunn a fonnt wat dee séiersten, einfachste Wee ass fir animéieren ronderëm, Animate.css.

Erstellt vun engem Typ mam Numm Dan Eden, Animate.css ass e séiere Wee fir ze kucken wéi CCS funktionnéiert an e puer Animatiounsaktiounen op Ärer Websäit kritt.

Beschriwwe wéi 'Just-add Waasser CSS Animatioun' Animate.css ass e bësse Spaass mat enger seriöser Säit. Et erlaabt och Amateur Web Designer wéi ech mech séier mat de Fundamenter vun der CSS Animatioun anzegoen an einfach awer effektiv Effekter fir Websäiten ze kreéieren. Vun enger eenzeger animéierter Iwwerschrëft op méi involvéiert Bewegungen, kann dëst Tool et maachen.

Animate.css Bewäertung-2

Animate.css

Animate.css ass verfügbar fir vu GitHub erofzelueden an ass am Wesentlechen eng Bibliothéik vun einfache CSS Effekter, déi op enger Plaz gesammelt ginn. All Animatioun ass schéin gepackt a prett fir ze benotzen. Alles wat Dir maache musst ass d'Animatioun ze fannen déi Dir gär huet an d'Klass uwennen. Dat ass wierklech alles wat et ass fir et.

Dir musst déi ganz Bibliothéik net eroflueden wann Dir net wëllt, well et sinn 2500 Linnen Code bannent et. Dir kënnt den Animate.css Site besichen, eng Animatioun fannen a klickt op den Download Animate.css Link. Et luet d'Klass op eng Websäit fir Iech ze kopéieren an ze benotzen, wéi Dir gutt fit.

Et ass méi einfach de GitHub ze benotzen an awer ze boren fir den Effekt ze fannen deen Dir sicht.

  1. Navigéiert op d'Css GitHub Säit.Klickt op de Quelllink fir op d'Lëscht vun Elementer ze kommen.Selektéiert den Effekttyp deen Dir sicht aus der Lëscht. Bounce ass en Opmierksamkeetssucher, wielt also den Opmierksamkeet_seekers Link.Selekt bounce.css.Copy de Code a plazéiert se op Är Säit fir d'Animatioun ze bewerben.

Et ass wierklech sou einfach. Dir wär selbstverständlech verschidden Optiounen fir déi verschidden Effekter ze wielen, awer d'Endresultat ass datselwecht. Zougang zum Code noutwendeg fir d'Schwéierlift op der Säit ze maachen.

Animate.css Bewäertung-3

Bauen en animéierten Objet mat Animate.css

Eppes cool mat Animate.css bauen ass einfach. Et ass just eng Saach de CCS Code ze fannen an en an Ären eegene CSS ze addéieren. Wann ech et maache kann, kann een!

Déi éischt Optioun op der Animate.css Säit ass bounce, also benotze mir dat an dësem Beispill ze benotzen.

  1. Paste ' 'dobannen an Ärem Styleheet.Find der CSS fir d'Animatioun déi Dir wëllt a füügt se an dat Element dat Dir wëllt animéieren. Zum Beispill, füügt ' 'fir dee Bouneffekt fir ze testen, e Bild oder wat och ëmmer. Fügt de folgende CSS Code fir datt et alles funktionnéiert. Ugeholl vum Boun.css uewendriwwer.

@keyframes schloen {

vun, 20%, 53%, 80%, bis {

Animatioun-Timing Funktioun: Kubik-Bezier (0.215, 0.610, 0.355, 1.000);

transforméieren: translate3d (0,0,0);

}

40%, 43% {

Animatioun-Timing Funktioun: Kubik-Bezier (0.755, 0.050, 0.855, 0.060);

transforméieren: translate3d (0, -30px, 0);

}

70% {

Animatioun-Timing Funktioun: Kubik-Bezier (0.755, 0.050, 0.855, 0.060);

transforméieren: translate3d (0, -15px, 0);

}

90% {

transforméieren: translate3d (0, -4px, 0);

}

}

.bounen {

Animatiouns-Numm: bounce;

transform-Hierkonft: Zentrum ënnen;

}

Maacht Animatioun weider mat Animate.css

Déi uewe genannte Sequenz füügt e Bounce Effekt wann d'Säit éischt luet, wat cool ass awer eng eemoleg Saach. Wéi wir et mer bäi ze halen. Op dee Wee, wann iergendeen iwwer den Test hänkt, da spréngt en. Et ass net eppes wat ech op enger Produktiouns Websäit maachen, awer et ass e super Wee fir ze demonstréieren wéi alles funktionnéiert.

Füügt de folgende Code an Ärem CSS fir de Bounce mam Hover Effekt ze addéieren. De, all Kéiers wann d'Maus iwwer d'Element hänkt, da misst se boungen.

.animéiert: halen {

-webkit-Animatioun-Dauer: 1s;

-moz-Animatioun-Dauer: 1s;

-ms-Animatioun-Dauer: 1s;

-o-Animatioun-Dauer: 1s;

Animatiounsdauer: 1s;

-webkit-Animatioun-Füllmodus: béid;

-moz-Animatioun-Füllmodus: béid;

-ms-Animatioun-Füllmodus: béid;

-o-Animatioun-Füllmodus: béid;

Animatioun-Füll-Modus: béid;

}

Wann Dir CSS wësst, wësst Dir vill besser wéi ech wéi ech verschidden Effekter op verschidden Aktiounen ëmsetzen. Als Ufänger hëllefen dëst an d'Bibliothéiken, déi an Animate.css geliwwert sinn, Basis, awer effektiv Animatioune fir meng Websäiten ze kreéieren.

Ech weess net wéivill ech op enger Live Websäit benotze well se ëmmer net sou gutt ënnerhalen an mobil Benotzer schénge se guer net gär ze hunn. Wéi och ëmmer, als Lektioun a wéi CSS funktionnéiert a wéi et benotzt ka ginn fir de Web ze verbesseren, ass et eng super Ressource. Ech sinn just en Ufänger awer souguer e puer Stonnen mat Animate.css verbréngen fir dësen Tutorial huet mir vill léiert. Ech denken, ech spille vill méi mat der ier ech fäerdeg sinn. Wéi ass et mat dir?