25 cool primjera CSS animacije za ponovno stvaranje

Autor: Peter Berry

Datum Stvaranja: 18 Srpanj 2021

Datum Ažuriranja: 5 Svibanj 2024

Sadržaj

Što je CSS animacija?
01. Zabavan efekt miša
02. Veliko otkriće
03. teturajući dalje
04. Squigglevision
05. Prevrtanje slova
06. Flip knjiga
07. Puhanje mjehurića
08. Pomicanje miša
09. Animirano pisanje
10. Leteće ptice
11. Prekriži moj hamburger
12. Jurnjava po krugovima

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 upotrebom 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. "Isporuka 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 su vam potrebni za stvaranje nezaboravnih iskustava za vaše korisnike."

Najbolje animacije još uvijek vuku korijene iz Disneyjevih klasičnih 12 principa animacije - vidjet ćete nekoliko spominjanja toga u ovim primjerima CSS animacije, pa vrijedi pogledati taj članak prije nego što započnete. Možda biste željeli istražiti našu listu sjajnih animiranih glazbenih videozapisa za daljnje primjere i inspiraciju.

Zlatno je pravilo da vaše CSS animacije ne smiju biti prenapuhane - č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

Autor: Donovan Hutchinson

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:

div> div> div> / div> / div> / div>

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

.demo {pozadina-boja: hsl (207, 9%, 19%); zaslon: flex; align-items: sredina; justify-content: centar; visina: 100vh; širina: 100%; } .perspective-container {perspektiva: 800px; }

Zatim oblikujte div koji želimo animirati:

.card {background-image: url (https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif); veličina pozadine: naslovnica; sjena okvira: 0 0 140px 10px rgba (0,0,0, .5); položaj: relativan; visina: 300px; širina: 500px; preljev: skriven; / * Pokušajte ukloniti ovo da biste vidjeli kako sjaj djeluje! * / --sheenX: 0; / * Postavite ih s JavaScriptom * / --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šoj kartici nakon pseudo-element:

.card :: after {content: ""; položaj: apsolutni; vrh: -400px; desno: -400px; dno: -400px; lijevo: -400px; pozadina: linearni gradijent (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%); transformirati: 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;

Sada nam treba handleMouseMove funkcija za rukovanje onmousemove:

funkcija handleMouseMove (događaj) {const height = window.innerHeight; const širina = window.innerWidth; // Stvara kutove od (-20, -20) (lijevo, dolje) i (20, 20) (desno, gore) const yAxisDegree = event.pageX / width * 40 - 20; const xAxisDegree = event.pageY / height * -1 * 40 + 20; target.style.transform = `rotateY ($ {yAxisDegree} stupnjeva) rotateX ($ {xAxisDegree} stupnjeva)`; // Postavljanje sjajnog položaja 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) {// Ovo stvara "udaljenost" do 400px u svakom smjeru za nadoknađivanje sjaja 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.

Množ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 prikazuje renderovac 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 nezgodnim, ali zapravo se oslanja na samo nekoliko stvari.

Prvo ćemo postaviti pozicioniranje našeg elementa (ovdje preuzmite cijeli kôd) - 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 popunjavanja ne škodi. Također ćemo definirati ishodište pretvorbe, u slučaju nadređenog elementa želimo koristiti početni položaj. Budući da želimo da je element u početku skriven, 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, nizamo animacije, koristeći funkcije vremenskog određivanja ili odgode kako bismo nadoknadili svaku od njih.

Napomena, nadoknađivali smo animacije nadređenog i pseudo elementa sa odgodom 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

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

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 razbiti) vaše animirano iskustvo: odgoda animacije.

Recimo, na primjer, imamo mrežu slika koje želimo animirati u okvir kad se korisnik pomiče. 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 {animacija: animationName 1.5s jednostavnost ulaska 1 naprijed; @ za $ i od 1 do 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 brojčane 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, ručno nacrtanog osjećaja i izbjegavanje nekih ograničenja prikazivanja 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 donekle nazubljeni i grubo klesani, već se ti hrapavi 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 igrati se vremenskih trajanja 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

Kao što se vidi na: Igra godine
Autor: Leon smeđa

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.

! DOCTYPE html> html> head> title> Off Kilter Text Animation / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> script src = "code.js"> / script > / head> body> h1> Animirani naslov / h1> h1> Animirani naslov / h1> h1> Animirani naslov / h1> / body> / html>

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 je animacija definirana 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 animirati 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 stavlja unutar prozora opterećenje slušatelj događaja.

Riječ sadržaja animacijskih predmeta mora biti sadržana unutar raspon element. Da bi se to učinilo, postojeći HTML sadržaj vraća se na prazno, a zatim se koristi petlja da bi riječ na popisu identificiranih riječi postala 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.

Stvorite novu datoteku pod nazivom stilovi.css. Sada ćemo postaviti pravila prezentacije koja će biti dio svakog elementa riječi u animaciji, kontroliranog njihovom 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 {prikaz: blok; položaj: relativan; poravnanje teksta: središte; }

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 animirati i unazad ili naprijed razred.

Imajte na umu kako između animirati i unazad referenca klase, što znači da roditeljski element mora imati oboje.

.animate.backwards> span {animacija: animateBackwards 1s prema naprijed; } .animate.forwards> span {animacija: animateForwards 1s naprijed; }

Mješovita animacija definira se pomoću istih postavki kao i za unaprijed i unatrag. Umjesto da primjenjuje 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) {animacija: animateBackwards 1s prema naprijed; } .animate.mixed> raspon: n-to-dijete (neparno) {animacija: animateForwards 1s prema naprijed; }

Animacije koje smo upravo stvorili napravljene su početnim slovom 'iz’Početni položaj, bez vertikalnog položaja ili podešavanja rotacije. The ’doPolož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 {od {top: 0; transformirati: rotirati (0 stupnjeva); } do {top: .9em; transformirati: rotirati (-15deg); }} @keyframes animateBackwards {od {top: 0; transformirati: rotirati (0deg); } do {top: 1em; transformirati: rotirati (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 knjige. 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 funkcionira? 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 pred 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 je postaviti 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 sprita tada ć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:

animacija: trkač 0.75s koraka (32, kraj) beskonačan;

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 trkač {od {background-position: 0px 50%;} do {background-position: - 1280px 50%; }}

Imajte na umu da je okomito pozicioniranje slike dosljedno u cijelosti, što nam govori da su spriteovi vodoravno razvučeni preko slike, što je ukupna širina 1280px. Kako smo definirali ukupno 32 okvira za tu sliku, 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 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

Kao što se vidi na: 7 GORE
Pogledajte kod
Autor: Steven Roberts

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ć.

Prva animacija mijenja neprozirnost oblačića i pomiče ga okomito u okviru za prikaz; drugi 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, koristit ćemo 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.

g stroke-width = "7"> g transform = "translate (10 940)"> krug cx = "35" cy = "35" r = "35" /> / g> ... / g> g stroke- width = "4"> g transform = "translate (147 984)"> krug cx = "15" cy = "15" r = "15" /> / g> / g> ... / g>

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

g> g transform = "translate (10 940)"> krug cx = "35" cy = "35" r = "35" /> / g> / g>

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

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

Da bismo stvorili efekt lelujanja, jednostavno moramo pomaknuti (ili prevesti) mjehurić 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 se koleba {33% {transform: translateX (-50px); } 66% {transformiraj: 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.

.mjehurići-veliki> g {neprozirnost: 0; promijenit će se: transformacija, neprozirnost;} .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) {animacija: do 6.5s beskonačno; } .mjehurići-veliki g: nth-of-type (1) krug {animacija: klimavanje 3s beskonačno lako izbacivanje; } ... mali mjehurići g: nth-of-type (9) krug {animacija: klimavanje 3s 275ms beskonačno lako izbacivanje; } .bubbles-small g: nth-of-type (10) {animacija: do 6s 900ms beskonačno;}

08. Pomicanje miša

Kao što se vidi na: Baltički trening
Pogledajte kod
Autor: Steven Roberts

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.

svg xmlns = "..." viewBox = "0 0 76 130 "serveAspectRatio =" xMidYmid meet "> g fill =" none "fill-rule =" evenodd "> rect width =" 70 "height =" 118 "x = "1,5" y = "1,5" stroke = "# FFF" stroke-width = "3" rx = "36" /> krug cx = "36,5" cy = "31,5" r = "4,5" fill = "# FFF" /> / g> / svg>

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 {pozicija: apsolutno; dolje: 1rem; lijevo: 50%; transformiraj: translateX (-50%); } .miš {max-širina: 2,5rem; širina: 100%; visina: 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 pomicanje {0%, 20% {transform: translateY (0) scaleY (1); }}

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

@keyframes pomicanje {... 10% {neprozirnost: 1; } 100% {transformacija: translateY (36px) razmjeraY (2); neprozirnost: 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 {naziv animacije: pomicanje; trajanje animacije: 1,5 s; funkcija vremena-animacije: kubni-bezier (0.650, -0.550, 0.250, 1.500); broj animacija-iteracija: beskonačno; transformiraj-podrijetlo: 50% 20,5 piksela; promijenit će se: transformirati; }

09. Animirano pisanje

Kao što se vidi na: Vrt osam
Pogledajte kod za staze i tekst
Autor: Steven Roberts

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 animacije ključnog kadra. Jedina funkcija koja nam je potrebna za promjenu 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, prikazujemo 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 okrećemo 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

Kao što se vidi na: Fournier Père i Fils
Pogledajte kod za samačka ptica ili cijelo jato
Autor: Steven Roberts

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.

div> div> / div> / div>

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’); veličina pozadine: automatski 100%; širina: 88px; visina: 125px; promijenit će se: pozadina-položaj; } @keyframes leti-ciklus {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.

naziv animacije: muha-ciklus; funkcija animacije-vremena: koraci (10); broj animacija-iteracija: beskonačno; trajanje animacije: 1s; kašnjenje animacije: -0,5s;

Sada 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 pticu pomaknuti vodoravno preko zaslona, a istovremeno će promijeniti vertikalni položaj i mjerilo kako bi ptica mogla realnije vijugati preko.

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 - jedan {trajanje animacije: 1s; kašnjenje animacije: -0,5s; } .bird - dva {trajanje animacije: 0,9s; kašnjenje animacije: -0,75s; }

11. Prekriži moj hamburger

Kao što se vidi na: Bolja agencija za robne marke
Pogledajte kod za obuhvaća i SVG
Autor: Steven Roberts

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 nema potrebe za nadimanjem koda gumba s više raspona.

Zbog animirane prirode i SVG-a i njegovog plovnog 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 dva svojstva: 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: rotiraj (-45deg); }

12. Jurnjava po krugovima

Kao što se vidi na: Bolja agencija za robne marke
Pogledajte kod
Autor: Steven Roberts

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

svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 340 340"> krug cx = "170" cy = "170" r = "160" stroke = "# E2007C" / > krug cx = "170" cy = "170" r = "135" stroke = "# 404041" /> krug cx = "170" cy = "170" r = "110" stroke = "# E2007C" /> krug cx = "170" cy = "170" r = "85" stroke = "# 404041" /> / svg>

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.

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

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

učitavač @keyframes {50% {transformiraj: rotiraj (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' pružit će animaciji razigraniji osjećaj.

naziv animacije: preloader; trajanje animacije: 3s; broj animacija-iteracija: beskonačno; funkcija vremena animacije: lakoća ulaska-out;

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

@ za $ i od 1 do 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 kad 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.

kašnjenje animacije: - # {$ i * 0,15} s;

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

Prethodni Članak