25 cool primjera CSS animacije za ponovno stvaranje

css primjer miša za animaciju
(Slika zaslužna: Donovan Hutchinson)
Stranica 1 od 2: Vodiči za CSS animaciju

Dobro korištena, CSS animacija nevjerojatno je koristan i moćan alat. Može dodati interes ili kreativno uzbuđenje, usmjeriti pogled korisnika, objasniti nešto brzo i kratko i poboljšati upotrebljivost. Iz tog su razloga posljednjih godina sve više i više animacija na web mjestima i u aplikacijama.

U ovom smo članku zaokružili neke od najboljih primjera CSS animacije koje smo vidjeli i pokazati vam kako ih ponovno stvoriti. Pročitajte čitav niz detaljnih vodiča i nadahnjujućih efekata (i poveznice do njihovog koda) za istraživanje.



Što je CSS animacija?

CSS animacija metoda je animiranja određenih HTML elemenata bez potrebe za korištenjem procesora i memorije gladnog JavaScript-a ili Flash-a. Ne postoji ograničenje broja ili učestalosti CSS svojstava koja se mogu mijenjati. CSS animacije pokreću se određivanjem ključnih okvira za animaciju: ovi ključni okviri sadrže stilove koje će element imati.



Iako se može činiti ograničenim što se tiče animacije, CSS je zapravo doista moćan alat i sposoban je proizvesti lijepo glatke 60fps animacije. 'Dobavljanje promišljenih, fluidnih animacija koje doprinose značajnoj dubini vaše web stranice ne mora biti teško', kaže web programer Adam Kuhn. 'Moderna CSS svojstva sada vam predaju gotovo sve alate koji će vam trebati za stvaranje nezaboravnih iskustava za vaše korisnike.'

Najbolje animacije još uvijek vuku korijene iz Disneyevog klasika 12 principa animacije - vidjet ćete nekoliko spominjanja toga kroz ove primjere CSS animacije, pa vrijedi pogledati taj članak prije nego što započnete. Možda biste željeli istražiti i naš krug sjajnih animirani glazbeni spotovi za daljnje primjere i inspiraciju.



Zlatno je pravilo da se vaše CSS animacije ne smiju prenapuhavati - čak i mali pokret može imati velik utjecaj, a previše može ometati i iritirati korisnike. Evo naših omiljenih primjera i kako ih ponovno stvoriti.

01. Zabavan efekt miša

Ovo je zabavan efekt koji prati vaš miš. Moglo bi biti korisno kada želite skrenuti pozornost na element na vašoj stranici.

Za ovaj učinak treba nam vrlo malo HTML-a:



Prvo postavimo demo i postavimo perspektivu za našu 3D transformaciju:

.demo { background-color: hsl(207, 9%, 19%); display: flex; align-items: center; justify-content: center; height: 100vh; width: 100%; } .perspective-container { perspective: 800px; }

Zatim oblikujte div koji želimo animirati:

.card { background-image: url(https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif); background-size: cover; box-shadow: 0 0 140px 10px rgba(0,0,0,.5); position: relative; height: 300px; width: 500px; overflow: hidden; /* Try removing this to see how the sheen works! */ --sheenX: 0; /* Set these with JavaScript */ --sheenY: 0; }

Ovdje postavljamo pozadinu, a zatim postavljamo prelijevanje do skriven kako bismo mogli dodati a sjaj učinak kasnije. Također smo postavili css varijable , sheenX i Jevrejin .

Ove varijable sjaja pomoći će u postavljanju efekta sjaja. Koristimo ih u našim karticama nakon pseudo-element:

.card::after { content: ''; position: absolute; top: -400px; right: -400px; bottom: -400px; left: -400px; background: linear-gradient(217deg, rgba(255,255,255,0), rgba(255,255,255,0) 35%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%); transform: translateX(var(--sheenX)) translateY(var(--sheenY)); }

Ovdje osiguravamo da je pseudo-element veći od spremnika. To će nam dati nešto za klizanje po vrhu kartica koristeći transformirati .

The transformirati svojstvo koristi one CSS varijable koje smo ranije postavili. Postavit ćemo one s JavaScriptom. Postavimo JavaScript za prvo preslušavanje događaja miša:

document.onmousemove = handleMouseMove;

Sad nam treba handleMouseMove funkcija za rukovanje onmousemove :

function handleMouseMove(event) { const height = window.innerHeight; const width = window.innerWidth; // Creates angles of (-20, -20) (left, bottom) and (20, 20) (right, top) const yAxisDegree = event.pageX / width * 40 - 20; const xAxisDegree = event.pageY / height * -1 * 40 + 20; target.style.transform = `rotateY(${yAxisDegree}deg) rotateX(${xAxisDegree}deg)`; // Set the sheen position setSheenPosition(event.pageX / width, event.pageY / width); }

Naša funkcija uzima visinu i širinu prozora i stvara kut na X i Y osi. Zatim smo ih postavili na transformirati stil našeg kartica . To daje kartici kut zasnovan na mišu!

Sljedeći poziv je funkcija za postavljanje položaja pseudo-elementa:

function setSheenPosition(xRatio, yRatio) { // This creates a 'distance' up to 400px each direction to offset the sheen const xOffset = 1 - (xRatio - 0.5) * 800; const yOffset = 1 - (yRatio - 0.5) * 800; target.style.setProperty('--sheenX', `${xOffset}px`) target.style.setProperty('--sheenY', `${yOffset}px`) }

Naš pseudo-element izgleda najbolje kada se kreće u smjeru suprotnom od miša. Da bismo to postigli, stvaramo broj između -0,5 i 0,5 koji se mijenja u suprotnom smjeru izračunavanjem omjera za -1.

Pomnožimo ovaj broj s 800 koliko želimo da se poveća na najviše 400 piksela , što je koliko smo postavili sjaj pseudo-element izvan kartica .

Na kraju smo postavili ove vrijednosti pomaka na naša svojstva CSS varijable, a ostalo daje renderer preglednika.

Sada imamo kartu koja se okreće prema našem mišu dok se sjajni efekt na vrhu kreće u suprotnom smjeru. Ovo stvara lijep, privlačan efekt.

02. Veliko otkriće

  • Autor: Adam Kuhn

Čini se da su efekti otkrivanja animiranog sadržaja trenutno prilično popularni i ako se pravilno koriste, mogu usmjeriti fokus korisnika i privući vašu publiku. To ste već vidjeli: blok boja raste s jedne ili druge strane vodoravno ili okomito, a zatim se povlači na suprotnu stranu, ovaj put otkrivajući neki tekst ili sliku ispod. To je koncept koji se može činiti škakljivim, ali stvarno se oslanja na samo nekoliko stvari.

Prvo ćemo postaviti pozicioniranje elemenata ( preuzmite cijeli kod ovdje ) - definirajte ga kao relativan (u ovom slučaju neće uspjeti samo statički). U tekstualnim slučajevima najbolje je dopustiti automatsku visinu i širinu, iako malo dodavanja ne boli. Također ćemo definirati ishodište pretvorbe, u slučaju nadređenog elementa želimo koristiti početni položaj. Budući da želimo da se element u početku skriva, upotrijebit ćemo transformaciju ljestvice duž odgovarajuće osi kako bismo ga smanjili.

Dalje, pseudo element koji maskira našeg roditelja, postavljajući ishodište pretvorbe na suprotnu opciju. Konačno, nizanje animacija, koristeći bilo vremenske funkcije ili odgode kako biste nadoknadili svaku.

Napomena: nadoknađivali smo animaciju nadređenog i pseudo elementa sa zakašnjenjem govoreći okviru koji skriva naš tekst da ga otkrije tek nakon što se sam element u potpunosti prikaže. Pogledajte Codepen u nastavku.

03. teturajući dalje

  • Autor: Adam Kuhn

Jednom kad ste počeli skupljati pristojnu biblioteku raznih isječaka za ublažavanje, vrijeme je da istražite druge načine za poboljšanje dubine vaših animacija, a jedan od najboljih načina je nadoknađivanje vaših animiranih elemenata.

glazbeni video sa životinjama u baru

Prečesto je da je JavaScript okidač postavljen tako da pokreće hrpu animacija na temelju položaja pomicanja, da bi se sve stavke učinkovito kretale u tandemu. Srećom, CSS sam pruža jednostavno svojstvo koje može stvoriti (ili prekinuti) vaše animirano iskustvo: animacija-odgoda .

Recimo, na primjer, imamo mrežu slika koje želimo animirati u okvir kad se korisnik pomakne. Postoji nekoliko načina na koje bismo to mogli pokrenuti, najvjerojatnije dodavanje klasa elementima dok ulaze u okvir za prikaz. To, međutim, može biti prilično teško za preglednik i može se izbjeći jednostavnim dodavanjem jedne klase elementu spremnika i definiranjem kašnjenja animacije za podređene elemente.

Ovo je posebno dobar slučaj upotrebe pretprocesora poput SCSS ili LESS, koji nam omogućuju upotrebu a @za petlja za itiranje kroz svaki element.

#parent{ .child{ animation: animationName 1.5s ease-in-out 1 forwards; @for $i from 1 through 20{ &:nth-of-type(#{$i}){ animation-delay:#{$i/10}s; } } } }

Ovdje ćete vidjeti sa SCSS-om koji možemo provući kroz svaki : n-tipa selektor, zatim primijenite kašnjenje animacije na temelju numeričke vrijednosti svakog podređenog elementa. U ovom ćete slučaju primijetiti da dijelimo vrijeme kako bismo svaki prirast smanjili na djelić sekunde. Iako nadoknađivanje vaših animiranih elemenata može potaknuti vašu animaciju na emocije, previše kašnjenja može učiniti da se osjeća razdvojeno. Pogledajte ovaj CodePen u nastavku.

04. Squigglevision

  • Autor: Adam Kuhn

SVG filtri pružaju izvrstan način za postizanje prirodnog, rukom nacrtanog osjećaja i izbjegavanje nekih ograničenja pri pružanju ravnog osjećaja samo CSS-a. Njihovo animiranje može dodatno pojačati učinak.

Slučaj: Squigglevision. Da, ovo nije tehnički izraz poznat većini animatora, ali zasigurno ste ga vidjeli kako se koristi u crtićima. Ideja je da rubovi ovih animiranih elemenata nisu samo ponešto nazubljeni i grubo klesani, već se ti grubi rubovi brzo mijenjaju, kadar po kadar, čineći da se osjećaju kao da su istrgnuti sa stranica crteža i dovedeni u život.

Da bismo postigli taj učinak, na našu stranicu možemo uključiti SVG s više filtara i malim varijacijama u razinama turbulencije za svaki. Zatim ćemo postaviti vremensku traku animacije, pozivajući svaki filtar u svoj ključni kadar. Važno je poigrati se vremenskim trajanjima jer predviđamo da će se animacija osjećati 'poskočeno', ali ne želimo da bude tako spora da se osjeća razdvojeno ili tako brzo da se osjeća ludo.

U tu svrhu važno je napomenuti da CSS-u nedostaje sposobnost glatkog prijelaza između SVG filtara jer ne postoji način za pristup svojstvima poput turbulencije i razmjera, pa se uvijek treba očekivati ​​da će ove vrste animacija biti isprekidane.

05. Prevrtanje slova

CSS animacija: prevrtanje slova

Googleova igra godine sadrži zaigranu CSS animaciju na početnoj stranici, s naslovnim riječima koje se prevrću i sudaraju jedna o drugu. Evo kako je to učinjeno.

Prvi korak je definiranje dokumenta web stranice s HTML-om. Sastoji se od spremnika HTML dokumenta u kojem se nalaze odjeljak glave i tijela. Iako se odjeljak glave koristi za učitavanje vanjskih CSS i JavaScript resursa, tijelo se koristi za spremanje sadržaja stranice.

Off Kilter Text Animation

The Animated Title

The Animated Title

The Animated Title

Sadržaj stranice sastoji se od tri oznake naslova h1 koje će prikazati različite varijacije efekta animacije. Iako se bilo koji tekst može umetnuti u ove oznake, njihova animacija definirana je imenima u atributu klase. Postavke prezentacije i animacije za ove nazive klasa bit će definirane u CSS-u kasnije.

Zatim stvorite novu datoteku pod nazivom ' kod.js '. Želimo pronaći sve elemente stranice s Animirani klase i stvoriti niz popis koji predstavlja svaku riječ unutarnjeg teksta. Početno kašnjenje animacije također je definirano u ovom koraku. Sadržaj stranice neće biti dostupan dok se stranica ne učita u potpunosti, pa se ovaj kôd postavlja unutar prozora opterećenje slušatelj događaja.



Riječni sadržaj predmeta animacije mora biti sadržan unutar raspon element. Da bi se to učinilo, postojeći HTML sadržaj vraća se na prazno, a zatim se petlja koristi da bi riječ na identificiranom popisu riječi bila element raspona. Uz to, an animacijaDelay primjenjuje se stil - izračunava se u odnosu na početno kašnjenje (navedeno u nastavku) i položaj indeksa riječi.



window.addEventListener('load', function(){ var delay = 2; var nodes = document.querySelectorAll ('.animate'); for(var i=0; i

Stvorite novu datoteku pod nazivom stilovi.css . Sada ćemo postaviti pravila prezentacije koja će biti dio svakog elementa riječi u animaciji, kontroliranog njihovim oznakom raspona. Prikaži kao blok, u kombinaciji s centriranim poravnanjem teksta, rezultirat će time da se svaka riječ pojavi na zasebnoj liniji vodoravno poravnatoj prema sredini spremnika. Relativno pozicioniranje koristit će se za animiranje u odnosu na njegovo protok teksta položaj.

.animate span{ display: block; position: relative; text-align: center; }

Elementi animacije koji imaju klasu unatrag i prema naprijed imaju na njih primijenjenu specifičnu animaciju. Ovaj korak definira animaciju koja će se primijeniti na elemente raspona čiji nadređeni spremnik ima i Animirani i unazad ili naprijed razred.



Primijetite kako nema razmaka između Animirani i unazad referenca klase, što znači da roditeljski element mora imati oboje.

.animate.backwards > span{ animation: animateBackwards 1s ease-in-out forwards; } .animate.forwards > span{ animation: animateForwards 1s ease-in-out forwards; }

Mješovita animacija definira se istim postavkama koje se koriste za unaprijed i unatrag. Umjesto da primijeni animacije na svako dijete roditelja, n-to dijete Selektor se koristi za primjenu izmjeničnih postavki animacije. Animacija unatrag primjenjuje se na svaki čak -broj djeteta, dok se unaprijed animacija primjenjuje na svaki neparan -broj djeteta.

.animate.mixed > span:nth-child(even){ animation: animateBackwards 1s ease-in-out forwards; } .animate.mixed > span:nth-child(odd){ animation: animateForwards 1s ease-in-out forwards; }

Animacije koje smo upravo stvorili napravljene su početnim slovom ' iz 'početni položaj, bez vertikalnog položaja ili podešavanja rotacije. ' do 'položaj je konačno stanje animacije, koje postavlja elemente s prilagođenim okomitim položajem i stanjem rotacije. Za obje animacije koriste se malo drugačije postavke završetka kako bi se izbjeglo da tekst postane nečitljiv zbog preklapanja u mješovitim animacijama.



@keyframes animateForwards { from { top: 0; transform: rotate(0deg); } to { top: .9em; transform: rotate(-15deg); } } @keyframes animateBackwards { from { top: 0; transform: rotate(0deg); } to { top: 1em; transform: rotate(25deg); } }

06. Flip knjiga

  • Autor: Adam Kuhn

Prilikom animiranja s CSS-om ponekad je potreban mrtvački jednostavan pristup. A malo je jednostavnijih metoda animacije od flip book-a. Koristeći koraci () kao naša vremenska funkcija, sposobni smo ponoviti ovaj efekt. Iako ovo može zvučati nervozno i ​​izravno u suprotnosti s našom misijom održavanja fluidnosti, pravilnim korakom koraka može se osjećati jednako neprimjetno organsko.

Pa kako to djeluje? Našu funkciju olakšavanja animacije definiramo sa samo nekoliko dodatnih parametara - govoreći našoj animaciji koliko je koraka potrebno i u kojem trenutku tijekom prvog koraka želimo započeti (početak, kraj) - izgledajući ovako nekako, na primjer koraci (10, početak) .

Unutar naših ključnih okvira sada možemo odrediti krajnju točku naše animacije: pretpostavimo da je u ovom primjeru naša animacija duga 10 sekundi i koristimo 10 koraka. U tom će slučaju svaki korak trajati jednu sekundu i odmah se premjestiti na sljedeći okvir od jedne sekunde bez prijelaza između.

Opet, čini se da ovo leti suočeno s fluidnošću, ali evo koračnih animacija zaista može zasjati. Možemo postepeno prelaziti kroz list spritea i animirati kadar po kadar baš poput flip knjige. Definiranjem okvira jednake veličine, ali kompiliranjem na jednu vodoravnu (ili okomitu) sliku, možemo postaviti ovu sliku kao pozadinu elementa i definirati položaj pozadine u pikselima ili postocima kao krajnju točku naše animacije, omogućujući jedan korak za svaki okvir. List sprite zatim će pomaknuti i popuniti element okvir po kadar svježom pozadinskom slikom na temelju njegovog položaja.

Pogledajmo primjer. U ovom su slučaju neki skupovi animiranih nogavica dodani nekim tekstualnim znakovima. Prvo ćemo definirati naziv animacije, trajanje, broj koraka, početni položaj i broj iteracija:

animation:runner 0.75s steps(32, end) infinite;

Opet, imajte na umu da je trajanje relativno brzo za manje od jedne pune sekunde za ukupno 32 kadra. Zatim ćemo definirati ključne okvire:

@keyframes runner{ from{ background-position:0px 50%;} to{ background-position:- 1280px 50%; }}

Imajte na umu da je vertikalno pozicioniranje slike dosljedno u cijelosti, što nam govori da su spriteovi vodoravno razvučeni preko slike, što je ukupna širina 1280px. Kako smo za tu sliku definirali ukupno 32 okvira, možemo zaključiti da bi svaki okvir trebao biti širok 40 piksela. Pogledajte ovaj Codepen u nastavku.

Važno je napomenuti da veliki list spritea potencijalno može ozbiljno otežati izvedbu, zato pripazite da veličine i komprimirate slike. Uz dobro izrađen sprite list i odgovarajuće trajanje animacije sada imate glatku animaciju koja može prenijeti složene pokrete.

07. Puhanje mjehurića

CSS animacija balona koja se pojavljuje na 7UP-u prekrasan je primjer unošenja teme marke u dizajn web stranice. Animacija se sastoji od nekoliko elemenata: SVG ‘crtanje’ mjehurića, a zatim dvije animacije primijenjene na svaki mjehurić.

kako obojiti stil stripa

Prva animacija mijenja neprozirnost oblačića i pomiče ga okomito u okviru za prikaz; druga stvara efekt klimavanja za dodatni realizam. Pomak se rješava ciljanjem svakog mjehurića i primjenom različitog trajanja i odgode animacije.

Kako bismo stvorili mjehuriće koje ćemo koristiti SVG . U našem SVG-u stvaramo dva sloja mjehurića: jedan za veće i jedan za manje. Unutar SVG-a smještamo sve mjehuriće na dno okvira za prikaz.

... ...

Da bismo primijenili dvije zasebne animacije na naše SVG-ove, obje koje koriste svojstvo transformiranja, trebamo primijeniti animacije na zasebne elemente. The element u SVG-u može se koristiti slično kao div u HTML-u; moramo svaki svoj mjehur (koji je već u grupi) zamotati u oznaku grupe.

CSS ima snažan animacijski mehanizam i zaista jednostavan kôd za izradu složenih animacija. Započet ćemo s pomicanjem mjehurića prema zaslonu i promjenom njihove neprozirnosti kako bismo ih na početku i na kraju animacije bledili prema van i van.

@keyframes up { 0% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1024px); } }

Da bismo stvorili efekt lelujanja, jednostavno moramo pomaknuti (ili prevesti) balončić lijevo i desno, za točno potrebnu količinu - previše će uzrokovati da animacija izgleda previše nabrijano i nepovezano, dok će premalo proći uglavnom nezapaženo. Eksperimentiranje je ključno za rad s animacijom.

@keyframes wobble { 33% { transform: translateX(-50px); } 66% { transform: translateX(50px); } }

Da bismo primijenili animaciju na naše mjehuriće, koristit ćemo grupe koje smo ranije koristili i pomoć n-tog tipa kako bi se identificirala svaka skupina mjehurića pojedinačno. Počinjemo primjenom vrijednosti neprozirnosti na mjehuriće i će promijeniti svojstvo kako bi se iskoristilo hardversko ubrzanje.

.bubbles-large > g { opacity: 0; will-change: transform, opacity;} .bubbles-large g:nth-of-type(1) {...} ... .bubbles-small g:nth-of-type(10) {...}

Želimo zadržati sva vremena animacije i kašnjenja u roku od nekoliko sekundi i postaviti ih da se ponavljaju beskonačno. Na kraju, primjenjujemo lakoća ulaska funkcija vremena za našu klimavu animaciju kako bi izgledala malo prirodnije.

.bubbles-large g:nth-of-type(1) { animation: up 6.5s infinite; } .bubbles-large g:nth-of-type(1) circle { animation: wobble 3s infinite ease-in-out; } ... bubbles-small g:nth-of-type(9) circle { animation: wobble 3s 275ms infinite ease-in-out; } .bubbles-small g:nth-of-type(10) { animation: up 6s 900ms infinite;}

08. Pomicanje miša

Suptilna animacija pomicanja miša može dati smjer korisniku kada prvi put dođe na web mjesto. Iako se to može postići korištenjem HTML elemenata i svojstava, koristit ćemo SVG jer je ovo prikladnije za crtanje.

Unutar našeg SVG-a potreban nam je pravokutnik sa zaobljenim kutovima i krugom za element koji ćemo animirati, pomoću SVG-a ikonu možemo prilagoditi bilo kojoj veličini koja nam treba.

Sada smo stvorili svoj SVG, trebamo primijeniti nekoliko jednostavnih stilova kako bismo kontrolirali veličinu i položaj ikone u našem spremniku. Omotali smo vezu oko SVG miša i postavili je na dno zaslona.

.scroll-link { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); } .mouse { max-width: 2.5rem; width: 100%; height: auto; }

Dalje ćemo stvoriti našu animaciju. Na 0 i 20 posto puta kroz našu animaciju želimo postaviti stanje svog elementa kako započinje. Postavljajući ga na 20% prolaska, dio vremena će ostati miran kad se beskonačno ponavlja.

@keyframes scroll { 0%, 20% { transform: translateY(0) scaleY(1); } }

Moramo dodati početnu točku neprozirnosti, a zatim transformirati i položaj Y i vertikalnu ljestvicu na oznaku 100%, kraj naše animacije. Posljednje što moramo učiniti je ispustiti neprozirnost kako bismo izblijedjeli svoj krug.

@keyframes scroll { ... 10% { opacity: 1; } 100% { transform: translateY(36px) scaleY(2); opacity: 0.01; } }

Na kraju primjenjujemo animaciju na krug, zajedno sa svojstvom 'transform-origin' i će promijeniti svojstvo koje omogućuje hardversko ubrzanje. Svojstva animacije prilično su razumljiva. The kubik-bezier funkcija vremena koristi se za prvo povlačenje kruga unatrag prije nego što ga spustimo na dno našeg oblika miša; ovo dodaje zaigrani osjećaj animaciji.

.scroll { animation-name: scroll; animation-duration: 1.5s; animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500); animation-iteration-count: infinite; transform-origin: 50% 20.5px; will-change: transform; }

09. Animirano pisanje

CSS animacije: pisanje

kako nacrtati izometrijski crtež
Kliknite da biste vidjeli animaciju u akciji

Web stranica Garden Eight koristi uobičajenu tehniku ​​animacije pri kojoj se čini da je tekst ispisan. Da bismo postigli učinak, okrećemo se SVG-u. Za početak ćemo stvoriti SVG. Ovdje postoje dva pristupa: pretvorite tekst u staze kako biste ih animirali ili upotrijebite SVG tekst. Oba pristupa imaju svoje prednosti i nedostatke.

Započnite s izradom naše ključne animacije. Jedina funkcija koju trebamo za izvođenje je promjena moždani udar-dashoffset . Sada smo stvorili svoju animaciju, moramo primijeniti vrijednosti iz kojih želimo animirati. Postavili smo moždani udar-dašara , što će stvoriti praznine u potezu. Želimo postaviti da naš potez bude dovoljno velika vrijednost da pokrije čitav element, konačno pomičući crticu za duljinu poteza.

Magija se događa kada primijenimo našu animaciju. Animirajući pomak, donosimo potez - stvaramo efekt crtanja. Želimo da elementi crtaju jedan po jedan, s nekim preklapanjem između kraja crtanja jednog elementa i početka crtanja sljedećeg. Da bismo to postigli obratimo se Sass / SCSS i n-tog tipa odgoditi svako slovo za polovicu duljine animacije pomnoženo s položajem određenog slova.

10. Leteće ptice

Počinjemo s potpuno ravnim vektorskim linijama, crtajući svaki okvir naše animacije, prikazujući pticu u drugom stanju leta. Zatim manipuliramo vektorskim točkama i zaokružujemo linije i rubove. Konačno, svaki okvir stavimo u kutiju jednake veličine i postavimo ih jedno pored drugog. Izvezite datoteku kao SVG.

Postavljanje HTML-a zaista je jednostavno. Samo trebamo zamotati svaku pticu u spremnik kako bismo primijenili više animacija - jednu da ptica leti, a drugu da je premjestimo preko zaslona.

Primjenjujemo pticu SVG kao pozadinu za div ptice i odabiremo veličinu koju želimo da ima svaki kadar. Širinu koristimo za grubo izračunavanje novog položaja pozadine. SVG ima 10 ćelija, pa pomnožimo širinu s 10, a zatim lagano mijenjamo broj dok ne izgleda ispravno.

.bird { background-image: url('bird.svg'); background-size: auto 100%; width: 88px; height: 125px; will-change: background-position; } @keyframes fly-cycle { 100% { background-position: -900px 0; } }

CSS animacija ima nekoliko trikova kojih možda niste svjesni. Možemo koristiti funkcija animacije-vremena za prikaz slike u koracima - slično poput listanja stranica u bilježnici da biste aludirali na animaciju.

animation-name: fly-cycle; animation-timing-function: steps(10); animation-iteration-count: infinite; animation-duration: 1s; animation-delay: -0.5s;

Sad smo stvorili svoj ciklus muha, naša ptica trenutno maše krilima, ali nikamo ne ide. Da bismo je premjestili preko zaslona, ​​kreiramo još jednu animaciju ključnog kadra. Ova će animacija pomaknuti pticu vodoravno preko zaslona, ​​a istovremeno će promijeniti vertikalni položaj i mjerilo kako bi ptici omogućili realnije vijuganje.

Nakon što kreiramo svoje animacije, jednostavno ih trebamo primijeniti. Možemo stvoriti više kopija naše ptice i primijeniti različita vremena animacije i kašnjenja.

.bird--one { animation-duration: 1s; animation-delay: -0.5s; } .bird--two { animation-duration: 0.9s; animation-delay: -0.75s; }

11. Prekriži moj hamburger

Ova se animacija koristi na cijelom webu, pretvarajući tri crte u ikonu križa ili zatvora. Do nedavno, većina implementacija postignuta je pomoću HTML elemenata, ali zapravo je SVG puno prikladniji za ovu vrstu animacije - više nije potrebno napuhavati kôd gumba s više raspona.

Zbog animirane prirode i SVG-a i njegovog navigacijskog DOM-a, kod za postizanje animacije ili prijelaza vrlo se malo mijenja - tehnika je ista.

Počinjemo s stvaranjem četiri elementa, bilo da se protežu unutar div-a ili staze unutar SVG-a. Ako koristimo raspone, trebamo upotrijebiti CSS da ih postavimo unutar div; ako koristimo SVG, to je već riješeno. Želimo smjestiti linije 2 i 3 u sredinu - jednu na drugu - dok ćemo linije 1 i 4 ravnomjerno razmaknuti iznad i ispod, pazeći da centriramo ishodište pretvorbe.

Oslonit ćemo se na prijelaz dvaju svojstava: neprozirnosti i rotacije. Prije svega želimo izblijediti retke 1 i 4 na koje možemo ciljati pomoću : n-to dijete selektor.

.menu-icon.is-active {element-type}:nth-child(1), .menu-icon.is-active {element-type}:nth-child(4) { opacity: 0; }

Preostalo je samo usmjeriti dvije srednje crte i zakrenuti ih za 45 stupnjeva u suprotnim smjerovima.

.menu-icon.is-active {element-type}:nth-child(2) { transform: rotate(45deg); } .menu-icon.is-active {element-type}:nth-child(3) { transform: rotate(-45deg); }

12. Jurnjava po krugovima

Animirana ikona za učitavanje sastoji se od četiri kruga. Krugovi nemaju ispune, ali imaju naizmjenične boje poteza.

U našem CSS-u možemo postaviti neka osnovna svojstva svim našim krugovima, a zatim koristiti : n-tipa selektor za primjenu drugačijeg moždani udar-dašara svakom krugu.

circle:nth-of-type(1) { stroke-dasharray: 550; } circle:nth-of-type(2) { stroke-dasharray: 500; } circle:nth-of-type(3) { stroke-dasharray: 450;} circle:nth-of-type(4) { stroke-dasharray: 300; }

Dalje, moramo stvoriti našu animaciju ključnog kadra. Naša je animacija zaista jednostavna: sve što trebamo je zakrenuti krug za 360 stupnjeva. Postavljanjem naše transformacije na oznaku 50% animacije, krug će se također zakrenuti natrag u svoj izvorni položaj.

@keyframes preloader { 50% { transform: rotate(360deg); } }

S našom stvorenom animacijom sada je samo trebamo primijeniti na svoje krugove. Postavili smo naziv animacije; trajanje; brojanje iteracija i funkcija vremena. 'Lakoća ulaska' omogućit će animaciji razigraniji osjećaj.

animation-name: preloader; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;

Trenutno imamo svoj utovarivač, ali svi se elementi istodobno rotiraju. Da bismo to popravili, primijenit ćemo kašnjenja. Stvorit ćemo svoja kašnjenja pomoću petlje Sass for.

@for $i from 1 through 4 { &:nth-of-type(#{$i}) { animation-delay: #{$i * 0.15}s; } }

Zbog kašnjenja, naš krug sada zauzvrat oživljava, stvarajući iluziju da se krugovi jure jedni za drugima. Jedini problem s tim je što kada se stranica prvi put učita, krugovi su statični, a zatim se počinju pomicati, jedan po jedan. Možemo postići isti efekt pomaka, ali zaustaviti neželjenu pauzu u našoj animaciji jednostavnim postavljanjem kašnjenja na negativnu vrijednost.

animation-delay: -#{$i * 0.15}s;

Sljedeća stranica: Još primjera CSS animacije za istraživanje

Trenutna stranica: Vodiči za CSS animaciju

Sljedeća stranica CSS efekti animacije