Animate.css - CSS3 bibliotek for å lage animasjon enkelt

CSS har forbedret seg med mange funksjoner som gjør webutviklingen mye mer interessant og utfordrende. En av disse funksjonene er CSS3 animasjonseffekter . Før CSS3, for å lage en animasjon, kan du bare jobbe med Javascript. Men nå kan du lage det enkelt med CSS3.

Vi har gått gjennom deg med en god opplæring om å skape Bounce Effect med CSS3 tidligere, og i dette innlegget vil jeg introdusere deg et fantastisk bibliotek som vil gjøre animasjonsskaping med CSS3 enda enklere: Animate.css .

Animate.css er en brukervennlig bibliotekssamling av CSS3 animasjonseffekter . Dette biblioteket gir deg over 50 forskjellige animasjonseffekter som fungerer konsekvent på de fleste alle nettlesere med CSS3-støtte.

Du kan deretter bruke animasjonen på teksten, bildet, skjemaet og så videre. Det er også mange flotte nettsteder som bruker denne libraren; Tridiv - den beste CSS 3D-editoren på nettet - er en av dem.

Starter

Med Animate.css, alt du trenger å gjøre er å inkludere de riktige klassene med elementene dine . For å komme i gang, ta for det første animate.css filen inn i hodet . Du kan laste ned hele biblioteket fra Github-arkivsiden.

Som standard vil Animate.css animere bare en gang på den første siden . Det vil da forbli statisk. For å kunne kontrollere animasjonen, trenger vi litt Javascript. I denne saken vil vi inkludere en jQuery i prosjektet, slik som det.

 ...  ... 

HTML Markup

For å bruke animasjonen må du legge til .animated klasse til elementet du vil animere, sammen med animasjonsnavnet som det.

 Denne teksten vil animere. 

Det er det! Animasjonen vil bare bli implementert på sidebelastningen, så du må kanskje også bruke Javascript for å bruke animasjonen på en hendelsesutløser. .option kan også tilpasses dine behov.

Ekstra CSS-alternativer

Den animasjonen vi tidligere har definert, vil sløyfe bare en gang og på en forhåndsdefinert varighet og forsinkelsestid også. Hvis du trenger flere looper eller en annen varighet eller forsinkelsestid, kan du tilpasse dette.

For å la animasjonen gå flere ganger eller til og med uendelig, kan du bruke animation-iteration-count attributt. Pass på at du også inkluderer gjeldende leverandørprefikser som webkit, moz, etc. For å gjøre det uendelig, legg deretter til infinite som verdien.

Hvis du trenger det til å gå bare flere ganger, bare skriv inn verdien med antall løkker du vil ha.

 -vendor-animasjon-iterasjon-telling: uendelig |  ; 

For å tilpasse varigheten, er det passende attributtet som skal brukes, animation-duration ; og det er animation-delay for forsinkelseskontroll. Følgende er en prøvealternativskode.

 .option {-webkit-animasjon-varighet: 3s; -webkit-animasjon-forsinkelse: 2s; -webkit-animasjon-iterasjon-telling: 5; } 

Javascript-kontroll

For mer kontroll på animasjonsstaten, trenger vi litt hjelp fra Javascript. La oss si at vi vil ha en tekstlink for å utløse en animasjon ved et klikk. For det første må vi legge til en referanse i lenken, slik som det.

Denne teksten vil animere.

For å bruke klikkfunksjonen, inkludere lenkehenvisningen i den.

Med Javascript kan du definere animasjonsnavnet. Vi bruker en tilnærming ved å skape en animate, og navngir animasjonen sammen med elementklassen (i koden ovenfor har vi lagt til demo ).

Og Javascript-koden vil som følger.

Animasjonseffekt er faktisk en av de beste måtene å gjøre nettstedet ditt mer attraktivt, men husk å ikke overdrive det.

Slik sletter du ut av WhatsApp datadeling

Hvis du ikke har hørt, WhatsApp har fornyet vilkårene for bruk og personvern og sammen med den oppdateringen, er kunngjøringen at WhatsApp vil dele noen av dine WhatsApp-konto data med Facebook. Her er hva du trenger å vite om dette trekket, og hva du kan gjøre med det . Hva vil ikke WhatsApp dele med Facebook? Fac

(Tekniske og design tips)

30 kunstneriske instagrammer du bør følge

Instagram er riddled med kontoer av kjendiser, reiseblogger, humor vlogs, og mange flere. Det er også hjemmet til noen av de mest kreative artistene du finner på nettet. I dette innlegget er 30 så talentfulle artister som gir deg en oversikt over deres arbeid og liv via Instagram.Vurder dem din daglige dose kreativitet om morgenen (eller kvelden) når du våkner for å starte dagen (eller natten). Dere

(Tekniske og design tips)