25 remek CSS animációs példa az újrateremtéshez

css animációs egér példa
(Kép jóváírása: Donovan Hutchinson)
1/2 oldal: CSS animációs oktatóanyagok

Jól használható CSS ​​animáció hihetetlenül hasznos és hatékony eszköz. Érdeklődést vagy kreatív izgalmat adhat, irányíthatja a felhasználó figyelmét, gyorsan és tömören elmagyarázhat valamit, és javíthatja a használhatóságot. Emiatt az elmúlt években egyre több animáció zajlott a webhelyeken és az alkalmazásokban.

Ebben a cikkben összefoglaljuk a legmenőbb CSS-animációs példákat, amelyeket láttunk, és megmutatjuk, hogyan lehet újra létrehozni őket. Olvassa el a számos részletes oktatóanyagot és inspiráló effektusokat (és a kódjukra mutató linkeket).

Mi az a CSS animáció?

A CSS animáció egy módszer bizonyos HTML elemek animálására anélkül, hogy processzort és memóriaigényes JavaScriptet vagy Flash-t kellene használni. A megváltoztatható CSS-tulajdonságok száma és gyakorisága nincs korlátozva. A CSS-animációkat az animáció kulcsképeinek megadásával kezdeményezzük: ezek a kulcsképek tartalmazzák az elem stílusait.



Bár korlátozottnak tűnhet, amikor az animációról van szó, a CSS valójában egy igazán hatékony eszköz, és gyönyörűen sima, 60 kép / mp sebességű animációk készítésére képes. 'Átgondolt, folyékony animációk szállítása, amelyek érdemi mélységet nyújtanak a webhelyének, nem feltétlenül lehetnek nehézek' - mondja Adam Kuhn, a front end webfejlesztő. 'A modern CSS-tulajdonságok most már szinte az összes eszközt átadják, amelyekre emlékezetes élményeket lehet teremteni a felhasználók számára.'

A legjobb animációk még mindig a Disney klasszikusában gyökereznek Az animáció 12 alapelve - A CSS animációs példákban több említést is talál majd erről, ezért érdemes megnézni ezt a cikket, mielőtt belekezdenénk. Érdemes felfedeznie a nagyszerű összefoglalónkat is animációs zenei videók további példák és inspiráció.

Az aranyszabály az, hogy a CSS-animációidat nem szabad túlfújni - még egy kis mozgás is nagy hatással lehet, és a túl sok zavaró és irritáló lehet a felhasználók számára. Itt vannak a kedvenc példáink és azok újbóli létrehozása.

01. Vidám egérhatás

Ez egy szórakoztató hatás, amely követi az egeret. Hasznos lehet, ha az oldal valamely elemére szeretné felhívni a figyelmet.

Ehhez a hatáshoz nagyon kevés HTML-re van szükségünk:

Először pozicionáljuk a demót és perspektívát állítunk a 3D transzformációnkhoz:

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

Ezután formázza az animálni kívánt div-t:

.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; }

Itt beállítottunk egy hátteret, majd beállítottunk túlcsordulás nak nek rejtett hogy hozzá tudjuk adni a ragyogás későbbi hatása. Mi is beállítottunk css változók , sheenX és fényes .

Ezek a fényes változók segítenek elhelyezni a fényesség hatását. Kártyánkban használjuk őket után ál-elem:

.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)); }

Itt ellenőrizzük, hogy az ál-elem nagyobb, mint a tároló. Ez ad nekünk valamit, amivel csúszhatunk a tetején kártya felhasználásával átalakul .

A átalakul tulajdonság a korábban beállított CSS-változókat használja. Beállítjuk a JavaScript-et. Állítsuk be a JavaScriptet, hogy először meghallgassuk az egéreseményeket:

document.onmousemove = handleMouseMove;

Most szükségünk van egy handMouseMove funkció kezelni mozog :

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); }

Funkciónk figyelembe veszi az ablak magasságát és szélességét, és szöget hoz létre az X és Y tengelyeken. Ezután ezeket beállítottuk a átalakul stílusunk kártya . Ez a kártya szöget kap az egér alapján!

Ezután egy függvényt hívunk meg az álelem helyzetének beállításához:

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`) }

Az álelemünk akkor néz ki a legjobban, ha az egérrel ellentétes irányban mozog. Ennek elérése érdekében létrehozunk egy -0,5 és 0,5 közötti számot, amely ellentétes irányban változik, az -1 arány kiszámításával.

Ezt a számot megszorozzuk 800-mal, mivel azt szeretnénk, ha maximumra nőne 400px , amilyen messzire állítottuk be a ragyogás álelem a kívül kártya .

Végül ezeket az eltolási értékeket beállítottuk a CSS változó tulajdonságaira, a többit pedig a böngésző renderelője végzi.

Most van egy kártyánk, amely szembefordul az egérrel, miközben a fényhatás a tetején ellentétes irányba mozog. Ez szép, figyelemfelkeltő hatást eredményez.

02. A nagy leleplezés

  • Szerző: Adam Kuhn

Az animált tartalomfeltáró hatások jelenleg meglehetősen népszerűnek tűnnek, és megfelelő használatukkal megragadhatják a felhasználók figyelmét és leköthetik a hallgatóságot. Ezt már látta: egy színtömb egyik vagy másik oldalról vízszintesen vagy függőlegesen nő, majd visszahúzódik az ellentétes oldalra, ezúttal felfedve néhány szöveget vagy képet alatta. Ez egy olyan koncepció, amely trükkösnek tűnhet, de valóban csak néhány dologra támaszkodik.

Először állítjuk be az elemek pozicionálását ( töltse le a teljes kódot itt ) - definiálja relatívként (ebben az esetben csak a statikus fog kudarcot vallani). Szöveges esetekben a legjobb az automatikus magasság és szélesség engedélyezése, bár egy kis párnázás nem árt. Meghatározunk egy transzformációs eredetet is, a szülő elem esetében a kiindulási helyzetet akarjuk használni. Mivel azt akarjuk, hogy az elem eleinte el legyen rejtve, a megfelelő tengely mentén egy méretarány-transzformációt használunk a zsugorításához.

Ezután a pszeudo elem a szülõink elfedésére, a transzformáció eredetét az ellentétes opcióra állítva. Végül fűzze össze az animációkat, vagy az időzítési függvények, vagy a késleltetések segítségével mindegyik ellensúlyozásához.

Megjegyzés: a szülő és az álelem animációit késéssel késleltettük, és csak akkor mondtuk el a szöveget elrejtő négyzetet, hogy az csak akkor jelenjen meg, ha maga az elem teljes mértékben áttekinthetővé vált. Nézze meg az alábbi Codepent.

03. Tántorogva

  • Szerző: Adam Kuhn

Miután elkezdett felhalmozni egy tisztességes könyvtárat a különböző könnyítő részletekből, itt az ideje megvizsgálni az animációk mélységének javításának más módjait, és az egyik legjobb módszer az animált elemek ellensúlyozása.

Túl gyakori, hogy a JavaScript-trigger aktiválva van egy csomó animáció elindítására a görgetés pozíciója alapján, csak azért, hogy megtalálja az összes elemet, amely hatékonyan mozog együtt. Szerencsére a CSS maga is biztosít egy egyszerű tulajdonságot, amellyel megalkothatja (vagy megtörheti) animációs élményét: animáció-késleltetés .

Tegyük fel például, hogy van egy rács képünk, amelyet keretbe szeretnénk animálni, amikor a felhasználó görget. Ezt számos módon kiválthatjuk, valószínűleg osztályokat adunk az elemekhez, amikor belépnek a nézetbe. Ez azonban meglehetősen súlyos megemelést jelenthet a böngészőben, és elkerülhető azzal, hogy egyszerűen egyetlen osztályt ad hozzá egy konténer elemhez, és meghatározza a gyermek elemek animációs késéseit.

Ez különösen jó eset az olyan előfeldolgozók számára, mint az SCSS vagy a LESS, amelyek lehetővé teszik az a használatát @ for hurok az egyes elemek áthaladásához.

#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; } } } }

Itt láthatja, hogy az SCSS segítségével képesek vagyunk mindegyiken átjutni : n-dik típus választót, majd alkalmazzon egy animációs késleltetést az egyes gyermekelemek számértéke alapján. Ebben az esetben megjegyezzük, hogy felosztjuk az időzítést, hogy az egyes lépéseket másodperc töredékére csökkentsük. Míg az animált elemek ellentételezése érzelmet kölcsönöz az animációnak, a túl sok késedelem szét tudja érezni magát. Nézze meg ezt a CodePen-t alább.

04. Squigglevision

  • Szerző: Adam Kuhn

Az SVG-szűrők nagyszerű módot kínálnak a természetes, kézzel rajzolt érzés elérésére, és elkerülhetők a CSS egyedülálló érzés-megjelenítési korlátai. Ezek animálása tovább fokozhatja a hatást.

Eset: Squigglevision. Igen, ez nem a legtöbb animátor által ismert szakkifejezés, de biztosan láttad már rajzfilmekben is. Az elképzelés az, hogy ezeknek az animált elemeknek az élei nemcsak kissé egyenetlenek és durván faragottak, hanem ezek az érdes élek is gyorsan, képkockánként változnak, és olyan érzést keltenek bennük, mintha egy vázlatfüzet oldaláról lettek volna kitépve, és élet.

Ennek a hatásnak az elérése érdekében felvehetünk oldalunkra egy SVG-t, amely több szűrővel rendelkezik, és mindegyiknél enyhén eltér a turbulencia szintje. Ezután beállítjuk az animáció idősorát, minden szűrőt a saját kulcsképében hívunk meg. Fontos, hogy együtt játsszunk az időzítés időtartamával, mivel úgy gondoljuk, hogy az animáció „ugrálós” lesz, de nem akarjuk, hogy olyan lassú legyen, hogy szétzúzódjon, vagy olyan gyorsan, hogy őrültnek érezze magát.

Ebből a célból fontos megjegyezni, hogy a CSS nem képes az SVG-szűrők közötti zökkenőmentes átmenetre, mivel nincs lehetőség hozzáférni olyan tulajdonságokhoz, mint a turbulencia és a méretarány, ezért az ilyen típusú animációktól mindig szaggatottnak kell lenniük.

05. Bukdácsoló betűk

CSS animáció: bukdácsoló betűk

A Google Év játéka a weboldalon egy játékos CSS-animációt tartalmaz, a címszavak összeomlanak és egymásnak ütköznek. Így történt.

Az első lépés a weboldal dokumentumának meghatározása HTML-vel. Ez egy HTML dokumentum tárolóból áll, amely egy fej és törzs szakaszt tárol. Míg a fejrész a külső CSS és JavaScript erőforrások betöltésére szolgál, a törzs az oldal tartalmának tárolására szolgál.

Off Kilter Text Animation

The Animated Title

The Animated Title

The Animated Title

Az oldal tartalma három h1 címcímkéből áll, amelyek megmutatják az animációs hatás különböző variációit. Bár bármilyen szöveg beilleszthető ezekbe a címkékbe, animációjukat az osztály attribútumban szereplő nevek határozzák meg. Ezen osztálynevek bemutatását és animációs beállításait a későbbiekben a CSS határozza meg.

Ezután hozzon létre egy új fájlt code.js '. Meg akarjuk találni az összes oldalelemet a Élénk osztály és hozzon létre egy sor a belső szöveg minden szavát képviselő lista. Az animáció kezdeti késleltetését ebben a lépésben is meghatározzuk. Az oldal tartalma csak akkor érhető el, ha az oldal teljesen betöltődött, ezért ezt a kódot az ablak belsejébe helyezzük Betöltés eseményhallgató.

Az animációs elemek szótartalmát az a-ban kell elhelyezni span elem. Ehhez a meglévő HTML-tartalmat üresre állítjuk, majd egy hurok segítségével span elem lesz az azonosított 'szavak' listában szereplő szó. Ezenkívül egy animationDelay stílust alkalmazzák - a kezdeti késleltetéshez (az alábbiakban meghatározva) és a szó indexpozíciójához viszonyítva számítják ki.



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

Hozzon létre egy új fájlt stílusok.css . Most meghatározzuk azokat a bemutatási szabályokat, amelyek az animáció minden szóelemének részei lesznek, a span címkéjük vezérli őket. Megjelenítés blokkként, középre igazított szövegbeállítással kombinálva azt eredményezi, hogy minden szó külön sorban jelenik meg vízszintesen a tároló közepéhez igazítva. A relatív pozícionálást arra használjuk, hogy animáljuk annak helyzetét szövegfolyam pozíció.

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

A visszafelé és előre osztályú animációs elemekre speciális animációt alkalmaznak. Ez a lépés meghatározza az olyan elemekre alkalmazandó animációt, amelyek szülőtárolójában mindkét Élénk és visszafelé vagy előre osztály.

Vegye figyelembe, hogy nincs-e szóköz a Élénk és visszafelé osztály hivatkozás, vagyis a szülő elemnek mindkettővel rendelkeznie kell.

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

A vegyes animációt ugyanazokkal a beállításokkal határozzuk meg, amelyeket az előre és hátra animációkhoz használunk. Ahelyett, hogy az animációkat a szülő minden gyermekére alkalmazná, a n-dik gyermek választó váltakozó animációs beállítások alkalmazására szolgál. A visszafelé történő animációt mindegyikre alkalmazzák még -számú gyermek, míg az előreindító animációt mindegyikre alkalmazzák páratlan -száma gyermek.

.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; }

Az imént készített animációk kezdőbetűvel készülnek tól től 'kiindulási helyzet, függőleges helyzet és forgásállítás nélkül. A ' nak nek 'pozíció az animáció végállapota, amely az elemeket beállított függőleges helyzetben és forgatási állapotban állítja be. Kissé eltérő befejezési beállításokat használunk mindkét animációnál, hogy elkerüljük a szöveg olvashatatlanná válását a vegyes animációk átfedése miatt.

@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 könyv

  • Szerző: Adam Kuhn

CSS-sel történő animáció esetén néha halott egyszerű megközelítésre van szükség. És kevés egyszerűbb animációs módszer létezik, mint a flip könyv. Használata lépések () mint időzítési funkciónk, képesek vagyunk megismételni ezt a hatást. Bár ez hullámzónak tűnhet, és közvetlenül ellentmond a folyékonyság fenntartásának küldetésünknek, a megfelelő tempó mellett ugyanolyan zökkenőmentesen érezheti magát organikusnak.

Tehát hogyan működik? Az animációkönnyítő funkciónkat néhány további paraméter segítségével definiáljuk - megadva az animációnknak, hogy hány lépésre van szükség, és az első lépés során melyik ponton szeretnénk elkezdeni (kezdet, vég) - például kissé így néz ki lépések (10, indítás) .

Kulcsképeinken belül kijelölhetünk animációnknak egy végpontot: ehhez a példához tegyük fel, hogy animációnk 10 másodperc hosszú, és 10 lépést használunk. Ebben az esetben minden lépés egy másodperc hosszú lesz, azonnal átkerül a következő egy másodperces képkockára, átmenet nélkül.

Ez megint úgy tűnik, hogy ez a folyékonyság előtt repül, de itt valóban ragyoghatnak a lépcsős animációk. Fokozatosan iterálhatunk egy sprite lapon keresztül és animálhatunk képkockánként, akár egy flip könyv. Azonos méretű keretek definiálásával, de egyetlen vízszintes (vagy függőleges) képre történő összeállításával beállíthatjuk ezt a képet elemháttérként, és pixel vagy százalékos háttérpozíciót határozhatunk meg animációnk végpontjaként, lehetővé téve mindegyiknek egyetlen lépést keret. Ezután a sprite lap elmozdul, és az elemet képkockánként egy új háttérképpel tölti fel, a pozíciója alapján.

Nézzünk meg egy példát. Ebben az esetben néhány animált lábkészlet egyes szöveges karakterekhez kapcsolódik. Először meghatározzuk az animáció nevét, időtartamát, lépésszámunkat, kezdő pozíciónkat és iterációs számunkat:

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

Ismét megjegyezzük, hogy az időtartam viszonylag gyors, kevesebb, mint egy teljes másodperc, 32 teljes képkocka esetén. Ezután meghatározzuk a kulcsképeket:

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

Ne feledje, hogy a kép függőleges elhelyezése végig konzisztens, ami azt mondja nekünk, hogy a spritek vízszintesen vannak kinyújtva a képen, amely teljes szélessége 1280 képpont. Mivel 32 képet határoztunk meg a képhez, arra következtethetünk, hogy minden képkockának 40 képpont szélesnek kell lennie. Nézze meg ezt a Codepent alább.

Fontos megjegyezni, hogy a nagy sprite lap potenciálisan súlyos terhelést jelenthet a teljesítményben, ezért mindenképpen méretezze és tömörítse a képeket. A jól kidolgozott sprite lap és a megfelelő animációs időtartam révén most egy sima animációval rendelkezik, amely képes összetett mozgásokat közvetíteni.

07. Buborékok fújása

A 7UP-on megjelenő CSS buborékanimáció gyönyörű példa arra, hogy a márka témája átkerül a weboldal tervezésébe. Az animáció néhány elemből áll: a buborékok SVG „rajza”, majd két buborékra alkalmazott két animáció.

Az első animáció megváltoztatja a buborék átlátszatlanságát és függőlegesen mozgatja a nézet mezőben; a második a hozzáadott realizmus ingadozó hatását hozza létre. Az ellentételezéseket úgy kezeljük, hogy megcélozzuk az egyes buborékokat, és különböző animációs időtartamot és késleltetést alkalmazunk.

A felhasznált buborékjaink létrehozása érdekében SVG . Az SVG-ben két buborékréteget hozunk létre: egyet a nagyobb buborékokhoz és egyet a kisebb buborékokhoz. Az SVG belsejében az összes buborékunkat a nézet mező aljára helyezzük.

... ...

Ahhoz, hogy két külön animációt alkalmazzunk SVG-jünkre, mindkettő felhasználva a transzformációs tulajdonságot, külön elemekre kell alkalmaznunk az animációkat. A az SVG elem hasonlóan használható a HTML div-jéhez; buborékjainkat (amelyek már egy csoportba tartoznak) be kell csomagolnunk egy csoport címkébe.

A CSS erőteljes animációs motorral és igazán egyszerű kóddal rendelkezik komplex animációk előállítása érdekében. Kezdjük azzal, hogy a buborékokat a képernyőn felfelé mozgatjuk, és átlátszatlanságukat megváltoztatjuk annak érdekében, hogy az animáció elején és végén elhalványuljanak.

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

A hullámzó effektus létrehozásához egyszerűen meg kell mozgatnunk (vagy lefordítanunk) a buborékot balra és jobbra, éppen megfelelő mennyiséggel - a túl sok miatt az animáció túlságosan elpördülőnek és leválasztottnak tűnik, míg a túl kevés kevéssé többnyire észrevétlen marad. A kísérletezés kulcsfontosságú az animációval való munka során.

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

Annak érdekében, hogy az animációt buborékjainkra alkalmazzuk, a korábban használt csoportokat és segítségüket fogjuk használni n-edik típus hogy minden egyes buborékcsoportot egyedileg azonosítsunk. Először egy átlátszatlansági értéket alkalmazunk a buborékokra és a meg fog változni tulajdonságot a hardveres gyorsítás kihasználása érdekében.

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

Szeretnénk az összes animációs időt és késést pár másodpercen belül megtartani, és végtelen ismétlésre állíthatjuk őket. Végül a könnyedén ki-be időzítő funkciója a vibrálás animációnknak, hogy kicsit természetesebbnek tűnjön.

.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. Görgető egér

Finoman görgethető egéranimáció útmutatást adhat a felhasználónak, amikor először landol egy weboldalon. Bár ez HTML elemek és tulajdonságok segítségével megvalósítható, az SVG-t fogjuk használni, mivel ez jobban megfelel a rajzolásnak.

Az SVG-n belül egy lekerekített sarkú téglalapra és egy körre van szükségünk az animálni kívánt elemhez, az SVG használatával az ikont bármilyen méretre méretezhetjük.

Most elkészítettük az SVG-t, néhány egyszerű stílust kell alkalmaznunk annak érdekében, hogy ellenőrizhessük az ikon méretét és helyzetét a tárolónkban. Egy linket tekertünk az egér SVG köré, és a képernyő aljára helyeztük.

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

Ezután elkészítjük az animációnkat. Az animációnk 0 és 20 százalékánál szeretnénk beállítani elemünk állapotát annak kezdetekor. Ha az út 20% -ára állítja, akkor az idő egy részében mozdulatlan marad, ha végtelenül ismételjük.

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

Hozzá kell adnunk az átlátszatlanság kezdőpontját, majd átalakítanunk kell az Y pozíciót és a függőleges skálát is az animációnk 100% -os jelénél. Az utolsó dolog, amit meg kell tennünk, el kell dobnunk az átlátszatlanságot, hogy elhalványuljon körünk.

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

Végül az animációt alkalmazzuk a körre, a ’transzformációs eredet’ tulajdonsággal és a meg fog változni tulajdonság lehetővé teszi a hardveres gyorsítást. Az animációs tulajdonságok meglehetősen magától értetődőek. A köbös-bezier az időzítési funkcióval először visszahúzza a kört, mielőtt az egér alakunk aljára esne; ez játékos érzést ad az animációnak.

.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. Animációs írás

CSS animációk: írás

Kattintson az animáció működés közbeni megtekintéséhez

A Garden Eight webhely egy közös animációs technikát használ, amelynek során a szöveg kiírásra kerül. A hatás elérése érdekében az SVG-hez fordulunk. Először létrehozzuk az SVG-t. Kétféle megközelítés létezik itt: konvertálja a szöveget utakra az animáció érdekében, vagy használja az SVG szöveget. Mindkét megközelítésnek vannak előnyei és hátrányai.

Kezdje kulcsképes animációnk létrehozásával. Az egyetlen funkció, amire szükségünk van, az a stroke-dashoffset . Most elkészítettük animációnkat, alkalmaznunk kell azokat az értékeket, amelyekből animálni szeretnénk. Beállítottuk a stroke-dasharray , amely hézagokat hoz létre a körvonalban. Elég nagy értéket akarunk beállítani az egész elem lefedésére, végül ellensúlyozva a gondolatjelet a löket hosszával.

A varázslat akkor következik be, amikor animációnkat alkalmazzuk. Az eltolás animálásával a vonást láthatjuk - rajzeffektust hozva létre. Azt akarjuk, hogy az elemek egyenként rajzoljanak, némi átfedéssel az egyik elem vége és a következő rajzolása között. Ennek elérése érdekében fordulunk Sass / SCSS és n-edik típus késleltetni az egyes betűket az animáció hosszának felével, megszorozva az adott betű helyzetével.

10. Repülő madarak

Teljesen egyenes vektor vonalakkal kezdjük, animációnk minden egyes keretét megrajzoljuk, a madarat más repülési állapotban ábrázoljuk. Ezután manipuláljuk a vektor pontokat, és kerekítjük a vonalakat és az éleket. Végül mindegyik keretet egyforma méretű dobozba tesszük, és egymás mellé helyezzük. Exportálja a fájlt SVG-ként.

A HTML beállítása nagyon egyszerű. Mindössze egy madarat be kell csomagolnunk egy konténerbe, hogy többféle animációt alkalmazzunk - az egyiket a madár repülésére, a másikat pedig a képernyőn való áthelyezésre.

A madár SVG-t alkalmazzuk madár divunk háttereként, és kiválasszuk a kívánt méretet. A szélességet használjuk az új háttérpozíció durva kiszámításához. Az SVG-nek 10 cellája van, ezért megszorozzuk a szélességünket 10-vel, majd kissé megváltoztatjuk a számot, amíg helyesnek tűnik.

.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; } }

A CSS animációnak van néhány trükkje, amelyekről nem biztos, hogy tisztában van. Használhatjuk a animáció-időzítés-funkció a kép lépésenkénti megjelenítése - hasonlóan ahhoz, mint egy notebookban lapozgatni az animációra utalva.

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

Most hoztuk létre légyciklusunkat, madarunk jelenleg csapkodja a szárnyait, de nem megy sehova. Annak érdekében, hogy áthelyezhesse a képernyőn, létrehozunk egy újabb kulcsképes animációt. Ez az animáció a madarat vízszintesen mozgatja a képernyőn, ugyanakkor megváltoztatja a függőleges helyzetet és a méretarányt is, hogy a madár reálisabban kanyaroghasson.

Miután elkészítettük animációinkat, egyszerűen alkalmaznunk kell őket. Több példányt készíthetünk madarunkról, és különböző animációs időket és késéseket alkalmazhatunk.

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

11. Keresztezd át a hamburgeremet

Ezt az animációt az egész interneten használják, három sort kereszt vagy bezáró ikonná alakítva. Egészen a közelmúltig a megvalósítások többségét HTML elemek használatával érték el, de valójában az SVG sokkal jobban megfelel az ilyen típusú animációknak - már nincs szükség több gombnyomással duzzasztani a gombok kódját.

Az animálható természet és az SVG, valamint a navigálható DOM miatt az animáció vagy átmenet végrehajtására szolgáló kód nagyon kevéssé változik - a technika ugyanaz.

Négy elem létrehozásával kezdjük, legyen szó akár egy div belsejéről, akár egy SVG belsejéről. Ha spanokat használunk, CSS-t kell használnunk a div belsejében történő elhelyezésre; ha SVG-t használunk, akkor erről már gondoskodunk. A 2. és a 3. vonalat középre akarjuk helyezni - egymás tetejére -, miközben az 1. és a 4. sort egyenletesen tesszük elé és fölé, ügyelve arra, hogy a transzformáció kezdőpontját középre állítsuk.

Két tulajdonság átállítására fogunk támaszkodni: az átlátszatlanságra és a forgatásra. Először is ki akarjuk halványítani az 1. és a 4. sort, amelyeket a : n-dik gyermek választó.

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

Csak annyit kell tennie, hogy megcélozza a két középvonalat és 45 fokkal elfordítja őket ellentétes irányba.

.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. Körök üldözése

Az animált betöltési ikon négy körből áll. A körök nincsenek kitöltve, de váltakozó vonalvezetésűek.

A CSS-ben beállíthatunk néhány alapvető tulajdonságot minden körünkhöz, majd felhasználhatjuk a : n-dik típus választó egy másik alkalmazásához stroke-dasharray minden körhöz.

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; }

Ezután létre kell hoznunk a kulcsképes animációt. Animációnk nagyon egyszerű: mindössze annyit kell tennünk, hogy elforgatjuk a kört 360 fokkal. Ha transzformációnkat az animáció 50% -os jelére helyezzük, akkor a kör is visszafordul eredeti helyzetébe.

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

Létrehozott animációnkkal most már csak alkalmaznunk kell a köreinket. Beállítottuk az animáció nevét; időtartam; iterációszámlálás és időzítési funkció. Az „egyszerű be-be” ​​játékélményt kölcsönöz az animációnak.

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

Jelenleg megvan a rakodónk, de az összes elem egyszerre forog együtt. Ennek kijavítására néhány késést alkalmazunk. Késéseinket egy Sass for loop használatával hozzuk létre.

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

A késések miatt körünk immár sorra animál, ezzel az illúziót keltve az egymást üldöző körökben. Az egyetlen probléma ezzel az, hogy amikor az oldal először betöltődik, a körök statikusak, majd egyenként mozogni kezdenek. Elérhetjük ugyanazt az eltolt hatást, de megállíthatjuk az animációnkban a nem kívánt szünetet, ha egyszerűen csak negatív értékre állítjuk a késéseket.

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

Következő oldal: További CSS animációs példák felfedezésre

Aktuális oldal: CSS animációs oktatóanyagok

Következő oldal CSS animációs effektusok