jól Használható, CSS animáció egy hihetetlenül hasznos, hatékony eszköz. Ez adhat érdeklődést vagy kreatív izgalom, közvetlen a felhasználó szeme, megmagyarázni valamit gyorsan és tömören, és javítja a használhatóságot. Ezért az elmúlt években egyre több animáció látott webhelyeken és alkalmazásokban.

ebben a cikkben összegyűjtjük 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 útmutatók és inspiráló hatások (és linkeket a kódot), hogy vizsgálja meg.

mi a CSS animáció?

a CSS animáció bizonyos HTML elemek animálásának módja, anélkül, hogy processzort, memóriaigényes Javascriptet vagy Flash-t kellene használni. Nincs korlátozva a CSS tulajdonságok száma vagy gyakorisága, amelyek megváltoztathatók. 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 úgy tűnhet, korlátozott, amikor az animáció, CSS valójában egy nagyon hatékony eszköz, amely képes előállítani szépen sima 60fps animációk. “Átgondolt, folyékony animációk szállítása, amelyek jelentős mélységet adnak webhelyének, nem kell nehéznek lennie” – mondja Adam Kuhn, a front end webfejlesztője. “A Modern CSS tulajdonságok most szinte az összes eszközt átadják Önnek, amelyre emlékezetes élményeket kell létrehoznia a felhasználók számára.,”

a legjobb animációk továbbra is a Disney klasszikus 12 animációs elveiben gyökereznek – erről számos említést fog látni ezekben a CSS animációs példákban, ezért érdemes megnézni ezt a cikket, mielőtt elkezdené. További példákkal és inspirációval érdemes megismerkednie a nagyszerű animált zenei videókkal.

az aranyszabály az, hogy a CSS animációit nem szabad túlfújni – még egy kis mozgás is nagy hatással lehet, túl sok zavaró és irritáló lehet a felhasználók számára., Íme a kedvenc példáink, hogyan lehet újra létrehozni őket.

Fun mouse effect

  • szerző: Donovan Hutchinson

Ez egy szórakoztató hatás, amely követi az egér körül. Hasznos lehet, ha fel szeretné hívni a figyelmet az oldal egyik elemére. kell nagyon kis HTML-ben ez a hatás:

<div class="demo"> <div class="perspective-container"> <div class="card"></div> </div></div>

Először helyezze el a bemutatót, állítsa a szempontból a 3D átalakítás:

Akkor stílus a div szeretnénk animálni:

Itt háttér, akkor állítsa túlcsordulás, hogy a rejtett úgy, hogy adjunk hozzá egy fényű hatás később., A css változókat is beállítjuk, sheenX és sheenY.

Ezek a fénylő változók segítenek a fényhatás pozícionálásában. Használjuk őket a kártya után pszeudo-elem:

itt vagyunk ügyelve arra, hogy a pszeudo-elem nagyobb, mint a tartály. Ez ad nekünk valamit, hogy csúszik körül a tetején a kártya segítségével transform.

a transzformációs tulajdonság kihasználja azokat a CSS változókat, amelyeket korábban beállítottunk. Mi meg azokat a JavaScript. Állítsuk be a JavaScriptet az egér események első meghallgatásához:

dokumentum.,onmousemove = handleMouseMove;

most szükségünk van egy handleMouseMove funkció kezelésére onmousemove:

funkciónk veszi az ablak magasságát és szélességét, és létrehoz egy szöget az X és Y tengelyeken. Ezután ezeket a kártya átalakítási stílusához állítjuk. Ez ad a kártya szög alapján az egér!

ezután egy függvényt hívunk fel a pszeudo-elem pozíciójának beállításához:

pszeudo-elemünk akkor néz ki a legjobban, ha az egérrel ellentétes irányba mozog. Ennek elérése érdekében -0,5-0,5 közötti számot hozunk létre, amely az arány -1-es kiszámításával az ellenkező irányba változik.,

ezt a számot 800-mal szorozzuk meg, mivel azt akarjuk, hogy legfeljebb 400px-ig terjedjen, így a sheen pszeudo-elemet a kártyán kívül állítjuk be.

végül ezeket az eltolási értékeket CSS változó tulajdonságainkra állítjuk, a többit pedig a böngésző megjelenítője végzi el.

most van egy kártyánk, amely az egérrel szemben fordul, miközben a fényhatás az ellenkező irányba mozog a tetején. Ez létrehoz egy szép, szemet gyönyörködtető hatása.,

the big reveal

  • Szerző: Adam Kuhn

animált tartalom felfedi hatások úgy tűnik, hogy nagyon népszerű most, és megfelelően használják tudják elfog felhasználói fókusz, és vegyenek részt a közönség. Ezt már látta: egy színblokk egyik vagy másik oldalról vízszintesen vagy függőlegesen nő, majd visszahúzódik az ellenkező oldalra,ezúttal valamilyen szöveget vagy képet mutat. Ez egy olyan koncepció, amely trükkösnek tűnhet, de valójában csak néhány dologra támaszkodik.,

először beállítjuk az elem pozicionálását (töltse le a teljes kódot itt) – határozza meg relatív (ebben az esetben csak a statikus meghibásodik). Szöveges esetekben a legjobb, ha lehetővé teszi az automatikus magasság és szélesség, bár egy kis padding nem fáj. Meghatározunk egy transzformációs eredetet is, abban az esetben, ha a szülőelemet a kiindulási pozíciót akarjuk használni. Mivel azt akarjuk, hogy az elem kezdetben rejtve legyen, a megfelelő tengely mentén skálaátalakítást használunk annak zsugorításához.

ezután egy pszeudo elem, amely elfedi a szülőt, az átalakítás eredetét az ellenkező opcióra állítva., Végül húzza össze az animációkat, az időzítési funkciók vagy a késések segítségével, hogy ellensúlyozza az egyes animációkat.

megjegyzés: a szülő és a pszeudo elem animációit késleltetéssel ellensúlyoztuk, mondván, hogy a szövegünket elrejtő doboz csak akkor jelenik meg, ha maga az elem teljesen fel van méretezve. Nézze meg az alábbi kódot.

Tántorog a

  • Szerző: Adam Kuhn

Ha már elkezdték felhalmozni egy rendes könyvtár különböző lazítás töredék, itt az ideje, hogy vizsgálja meg más módon fokozza a mélység, az animációk pedig egyik legjobb módja, hogy ellensúlyozza az animált elemek.,

túl gyakori, hogy a JavaScript trigger úgy van beállítva, hogy egy csomó animációt kezdeményezzen a görgetési pozíció alapján, csak hogy megtalálja az összes elemet, amely hatékonyan mozog párhuzamosan. Szerencsére CSS maga egy egyszerű tulajdonság, amely lehet, hogy (vagy szünet) az animált élmény: animáció-késleltetés.

tegyük fel például, hogy van egy képrácsunk, amelyet képkockává akarunk animálni, amikor a felhasználó gördül. Számos módon tudjuk kiváltani ezt, valószínűleg osztályok hozzáadása az elemekhez, amikor belépnek a nézetablakba., Ez azonban elég nehéz feladat lehet a böngészőn, és elkerülhető, ha egyszerűen csak egy osztályt adunk hozzá egy konténer elemhez, és meghatározzuk a gyermek elemek animációinak késleltetését.

Ez egy különösen jó felhasználási eset az olyan preprocesszorok számára, mint az SCS vagy kevesebb, amelyek lehetővé teszik számunkra, hogy @For loop-ot használjunk az egyes elemek iterálá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 megjelenik a SCSS képesek vagyunk, ismétlésére :nth-of-type választó, majd alkalmazni egy animáció késedelem alapján minden gyermek elem numerikus érték., Ebben az esetben meg fogja jegyezni, hogy elosztjuk az időzítést, hogy az egyes növekményeket másodperc törtrészére csökkentsük. Míg az animált elemek kiegyenlítése érzelmeket kölcsönöz az animációnak, a túl sok késleltetés miatt csalódottnak érezheti magát. Nézze meg ezt CodePen alább.

Squigglevision

  • Szerző: Adam Kuhn

SVG szűrők egy nagyszerű módja annak, hogy elérjék a természetes, kézzel rajzolt érzést, és menekülni néhány lapos érzés rendering korlátok CSS egyedül. Az animálás tovább növelheti a hatást.

eset: Squigglevision., Igen, ez nem a legtöbb animátor számára ismert technikai kifejezés, de biztosan látta, hogy rajzfilmekben alkalmazzák. Az ötlet az, hogy ezeknek az animált elemeknek a szélei nemcsak kissé szaggatott és durva faragásúak, hanem ezek a durva élek gyorsan változnak, keretről-keretre, így úgy érzik, mintha egy vázlatfüzet oldalairól letépték volna őket, és életre keltették őket.

ennek a hatásnak a eléréséhez egy SVG-t is beilleszthetünk oldalunkra, több szűrővel, valamint mindegyik turbulenciaszintjének enyhe variációival. Ezután beállítjuk az animációs idővonalat, minden szűrőt a saját kulcskeretébe hívva., Fontos, hogy játsszon az időzítés időtartama, ahogy előre az animáció úgy fogja érezni, “ideges”, de nem akarom, hogy olyan lassú, hogy úgy érzi, disjointed vagy olyan gyorsan, hogy úgy érzi, őrült.

ebből a célból fontos megjegyezni, hogy a CSS-nek nincs képessége az SVG szűrők közötti zökkenőmentes átmenetre, mivel nincs mód olyan tulajdonságok elérésére, mint a turbulencia és a skála, ezért az ilyen típusú animációktól mindig elvárható, hogy szaggatott legyen.,

Bukdácsoló betűk

  • Mint látható: Az Év játéka
  • Szerző: Leon barna

a Google az Év játéka jellegét meghatározza egy játékos a CSS animáció a honlap, a cím szavakat, bukdácsoló, s nekimegy egy másik. Itt van, hogyan történt.

az első lépés a weboldal dokumentum HTML-vel történő meghatározása. Ez áll a HTML dokumentum konténer, amely tárolja a fej-test rész., Míg a fej rész a külső CSS és JavaScript erőforrások betöltésére szolgál, a test az oldal tartalmának tárolására szolgál.

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útum nevei határozzák meg. Ezeknek az osztályneveknek a prezentációs és animációs beállításait később a CSS határozza meg.

ezután hozzon létre egy új ” kód ” nevű fájlt.js’., Meg akarjuk találni az összes oldalelemet az animate osztály segítségével, majd létrehozunk egy tömblistát, amely a belső szöveg minden szavát képviseli. A kezdeti animációs késleltetés ebben a lépésben is meg van határozva. Az oldal tartalma nem érhető el, amíg az oldal teljesen be nem töltődik, ezért ezt a kódot az ablak betöltési esemény hallgatójának belsejébe helyezzük.

az animációs elemek szótartalmát egy span elem belsejében kell elhelyezni. Ehhez a meglévő HTML-tartalmat üresen állítja vissza, majd egy hurkot használ, hogy az azonosított “szavak” listában szereplő szó span-elem legyen., Ezenkívül egy animationDelay stílust is alkalmazunk-a kezdeti késleltetéshez (az alábbiakban megadott) és a szó indexpozíciójához viszonyítva számítjuk ki.

Hozzon létre egy új fájlt styles néven.css. Most beállítjuk a prezentációs szabályokat, amelyek az animáció minden szóelemének részét képezik, amelyet a span tag vezérel. A blokkként történő megjelenítés, a központosított szövegigazítással kombinálva, minden szó megjelenik egy külön sorban, vízszintesen a tartály közepére igazítva. A relatív pozicionálás a szövegfolyam-pozícióhoz viszonyított animációra szolgál.,

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

Az előre-hátra osztályt tartalmazó animációs elemek speciális animációval rendelkeznek. Ez a lépés határozza meg azt az animációt, amelyet olyan span elemekre kell alkalmazni, amelyek szülőtárolója mind az animate, mind a visszafelé vagy előre osztály.

vegye figyelembe, hogy nincs tér az animált és a hátrafelé mutató osztályhivatkozás között, vagyis a szülő elemnek mindkettővel kell rendelkeznie.

a vegyes animációt az előre-hátra animációkhoz használt beállításokkal határozzuk meg., Ahelyett, hogy az animációkat a szülő minden gyermekére alkalmazná, az nth-child választó váltakozó animációs beállítások alkalmazására szolgál. A hátrafelé animáció minden páros számú gyermekre vonatkozik, míg az előre animáció minden páratlan számú gyermekre vonatkozik.

az imént létrehozott animációk kezdeti “from” kiindulási pozícióval készülnek, függőleges helyzet vagy forgatás nélkül. A ” to ” pozíció az animáció végső állapota, amely beállítja az elemeket egy beállított függőleges helyzetben és forgási állapotban., Kissé eltérő végződési beállításokat használnak mindkét animációhoz, hogy elkerüljék a szöveg olvashatatlanná válását a vegyes animációk átfedése miatt.

Flip book

  • Szerző: Adam Kuhn

animáláskor CSS néha halott egyszerű megközelítésre van szükség. Kevés egyszerűbb animációs módszer létezik, mint a flip book. Steps (), mint a mi időzítés funkció, képesek vagyunk megismételni ezt a hatást. Bár ez zavarosnak tűnhet, és közvetlenül ellentmond a folyékonyság fenntartására irányuló küldetésünknek, a megfelelő ingerlés mellett ugyanolyan zökkenőmentesen szervesnek érezheti magát.

tehát hogyan működik?, Csak néhány további paraméterrel definiáljuk az animációs lazítási funkciónkat – megmondjuk 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 kezdeni (start, end) – egy kicsit így néz ki, például lépések (10, start).

a kulcsképeken belül most kijelölhetünk egy végpontot az animációnkhoz: ebben a példában tegyük fel, hogy az 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 áttérve a következő egy másodperces keretre, átmenet nélkül.,

ismét úgy tűnik, hogy ez a folyékonyság ellenére repül, de itt van, ahol a lépcsős animációk valóban ragyoghatnak. Fokozatosan iterálhatunk egy sprite lapon keresztül, és animálhatjuk keretenként, mint egy flip-könyv. Az azonos méretű keretek meghatározá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 elem háttérként, és meghatározhatunk egy pixel vagy százalékos háttérhelyzetet animációnk végpontjaként, lehetővé téve minden egyes képkockához egyetlen lépést., A sprite lap ezután eltolódik, majd az elemkeretet képkockánként feltölti egy friss háttérképpel a pozíciója alapján.

vessünk egy pillantást egy példára. Ebben az esetben néhány animált lábkészlet csatolva van néhány szöveges karakterhez. Először is, adjuk meg az animáció neve, időtartama, lépés számít, start helyzetbe, iteráció szám: 

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

Újra, vegye figyelembe, hogy ez az időtartam viszonylag gyors kevesebb, mint egy teljes második 32 teljes keret., Ezután meghatározzuk kulcsképeinket: 

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

vegye figyelembe, hogy a kép függőleges elhelyezése az egészben következetes, ami azt mondja nekünk, hogy a sprite-ok vízszintesen vannak nyújtva a képen, ami teljes szélességben 1280px. Mivel a képhez 32 teljes keretet definiáltunk, arra következtethetünk, hogy minden képkockának 40px szélesnek kell lennie. Nézze meg ezt Codepen alább.

fontos megjegyezni, hogy egy nagy sprite lap potenciálisan súlyos húzást jelenthet a teljesítményen, ezért ügyeljen a képek méretére és tömörítésére., Egy jól kidolgozott sprite lap és megfelelő animációs időtartam most már egy sima animáció képes közvetíteni komplex mozgások.

buborékokat

  • Mint látható: 7UP
  • tekintse meg a kódot
  • Szerző: Steven Roberts

A CSS buborék animáció, mely a 7UP egy gyönyörű példa arra, kezében egy márka téma át a website design. Az animáció áll néhány elem: az SVG “rajz” a buborékok, majd két animációk alkalmazott minden buborék.,

az első animáció megváltoztatja a buborék átlátszóságát, és függőlegesen mozgatja a látószögben; a második Létrehozza a hullámzó hatást a hozzáadott realizmushoz. Az eltolásokat úgy kezeljük, hogy az egyes buborékokat célozzuk meg, és eltérő animációs időtartamot és késleltetést alkalmazunk.

a buborékok létrehozásához SVG-t fogunk használni. Az SVG-ben két réteg buborékot hozunk létre: az egyik a nagyobb buborékokhoz, a másik a kisebb buborékokhoz. Az SVG belsejében az összes buborékunkat a nézet doboz alján helyezzük el.,

annak érdekében, hogy két különálló animációt alkalmazzunk az SVG-kre, mindkettő az átalakítási tulajdonságot használja, az animációkat külön elemekre kell alkalmaznunk. A<g> elem SVG lehet használni, mint egy div HTML; meg kell, hogy lezárja az egyes buborékok (amelyek már egy csoportban) egy csoport tag.

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

a CSS erőteljes animációs motorral és nagyon egyszerű kóddal rendelkezik komplex animációk készítéséhez., Kezdjük azzal, hogy a buborékokat felfelé mozgatjuk a képernyőn, és megváltoztatjuk az átlátszatlanságukat, 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); }}

annak érdekében, hogy hozzon létre egy imbolygó hatás, egyszerűen meg kell mozgatni (vagy lefordítani) a buborék balra és jobbra, csak a megfelelő összeget – túl sok fog okozni az animáció, hogy néz ki túl jaunting és le, míg túl kevés lesz többnyire észrevétlen. 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 a buborékokra alkalmazzuk, a korábban használt csoportokat, valamint az nth-of-type segítségével azonosítjuk az egyes buborékcsoportokat külön-külön. Először egy opacity értéket alkalmazunk a buborékokra és a will-change tulajdonságra 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) {...}

az összes animációs időt és késleltetést pár másodpercen belül meg akarjuk tartani egymástól, és végtelenül meg akarjuk ismételni. Végül, alkalmazzuk a könnyű-in-out időzítés funkció a mi ingatag animáció, hogy úgy néz ki, egy kicsit természetesebb.,

görgető egér

  • mint látható: Baltic Training
  • a kód megtekintése
  • szerző: Steven Roberts

egy finom görgetésű egér animáció adhat irányt a felhasználónak, amikor először landolnak egy weboldalon. Bár ez lehet elérni a HTML elemek és tulajdonságok, fogunk használni SVG mivel ez jobban megfelel a rajz.

az SVG-n belül egy lekerekített sarkokkal ellátott téglalapra és egy körre van szükségünk ahhoz az elemhez, amelyet animálni fogunk, az SVG használatával az ikont bármilyen méretre méretezhetjük.,

most már létrehoztuk az SVG-t, néhány egyszerű stílust kell alkalmaznunk annak érdekében, hogy ellenőrizzük az ikon méretét és helyzetét a tárolónkban. Körbekerítettünk egy linket 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 animációnkat. Az animációnk 0-20 százalékánál az elem állapotát szeretnénk beállítani, ahogy kezdődik. Azáltal, hogy az út 20% – ára állítja, az idő egy részében marad, amikor végtelenül megismétlődik.,

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

hozzá kell adnunk az opacitás kezdőpontját, majd mind az Y pozíciót, mind a függőleges skálát a 100% – os jelnél, animációnk végén kell átalakítani. Az utolsó dolog, amit meg kell tennünk, hogy eldobjuk az átlátszatlanságot, hogy elhalványuljunk a körünkből.

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

végül az animációt a körre alkalmazzuk, a “transform-origin” tulajdonsággal és a “will-change” tulajdonsággal együtt, hogy lehetővé tegyük a hardveres gyorsítást. Az animációs tulajdonságok meglehetősen magától értetődőek., A köbös-bezier időzítési funkcióval először húzza vissza a kört, mielőtt az egér alakjának aljára dobja; Ez játékos érzést ad az animációnak.,

Animációs írás

Kattints ide az animáció akció
  • Mint látható: Kert Nyolc
  • Nézet a kódot a útvonalait szöveg
  • Szerző: Steven Roberts

A Kert Nyolc weboldal használ egy közös animációs technika, ahol megjelenik a szöveg íródott ki. A hatás elérése érdekében az SVG-hez fordulunk. Először is létrehozzuk az SVG-t., Itt két megközelítés létezik: konvertálja a szöveget görbékké, hogy animálja őket, vagy SVG szöveget használjon. Mindkét megközelítésnek vannak előnyei és hátrányai.

Kezdje azzal, hogy létrehozza a keyframe animációt. Az egyetlen funkció, amire szükségünk van, a stroke-dashoffset megváltoztatása. Most létrehoztuk az animációnkat, alkalmaznunk kell azokat az értékeket, amelyekből animálni akarunk. Beállítjuk a löket-dasharray-t, amely réseket hoz létre a stroke-ban. Azt akarjuk, hogy a löket elég nagy legyen ahhoz, hogy lefedje az egész elemet, végül ellensúlyozza a kötőjelet a löket hosszával.,

a varázslat akkor történik, amikor animációnkat alkalmazzuk. Az eltolás animálásával a löketet megjelenítjük-rajzhatást hozunk létre. Azt akarjuk, hogy az elemek egyenként rajzoljanak, némi átfedéssel az egyik elem rajzolásának vége között, majd a következőt rajzolják. Ennek eléréséhez fordulunk a Sass / SCSS-hez és az nth-of-type-hoz, hogy az egyes betűket az animáció hosszának felével késleltessük, megszorozva az adott betű helyzetével.,

repülő madarak

  • mint látható: Fournier Père et Fils
  • egyetlen madár vagy az egész állomány kódjának megtekintése
  • szerző: Steven Roberts

teljesen egyenes vektorvonalakkal kezdjük, animációnk minden keretét rajzolva, a madarat más repülési állapotban ábrázolva. Ezután manipuláljuk a vektorpontokat, és körbevesszük a vonalakat és a széleket. Végül minden keretet egy egyenlő méretű dobozba helyezünk, majd egymás mellé helyezzük őket. Exportálja a fájlt SVG-ként.

A HTML beállítás nagyon egyszerű., Csak be kell csomagolnunk minden madarat egy tartályba, hogy több animációt alkalmazzunk – az egyik, hogy a madár repüljön, a másik pedig a képernyőn mozogjon.

<div class="bird-container"> <div class="bird"></div></div>

a madár SVG-t háttérként alkalmazzuk a madár div-ra, és kiválasztjuk azt a méretet, amelyet minden egyes keretnek szeretnénk. A szélességet az új háttérhelyzet durván kiszámításához használjuk. Az SVG-nek 10 cellája van, tehát szélességünket 10-gyel szorozzuk meg, majd kissé megváltoztatjuk a számot, amíg helyesnek nem tűnik.

a CSS animációnak van néhány trükkje, amelyekről nem lehet tudni., Az animáció-időzítés funkció segítségével lépésről lépésre jeleníthetjük meg a képet – ugyanúgy, mint a notebook oldalain való átcsúszás, hogy animációra utaljon.

most létrehoztuk a repülési ciklusunkat, madárunk jelenleg szárnyait csapkodja, de nem megy sehova. Annak érdekében, hogy mozgassa őt a képernyőn, létrehozunk egy másik keyframe animációt. Ez az animáció vízszintesen mozgatja a madarat a képernyőn, miközben megváltoztatja a függőleges helyzetet és a skálát, hogy a madár reálisabban kanyarodjon át.

miután elkészítettük animációinkat, egyszerűen alkalmaznunk kell őket., Több példányt készíthetünk a 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;}

Cross My hamburger

  • mint látható: Better Brand Agency
  • tekintse meg a kódot a spans és SVG
  • szerző: Steven Roberts

Ez az animáció használják az egész weben, fordult három sort egy kereszt vagy közeli ikon., Egészen a közelmúltig, a legtöbb implementáció volna elérni HTML elemeket, de valójában SVG sokkal jobban illik ez a fajta animáció – nincs tovább szükség, hogy duzzad a gombok kódot több ível.

az animálható természet, az SVG és a navigálható DOM miatt az animáció vagy az átmenet megvalósítására szolgáló kód nagyon keveset változik-a technika ugyanaz.

kezdjük azzal, hogy négy elemet hozunk létre, legyen az egy div belsejében vagy egy SVG belsejében., Ha íveket használunk, akkor a CSS-t kell használnunk a div belsejében való elhelyezéshez; ha SVG-t használunk, ez már gondoskodott. A 2-es és a 3-as vonalakat középre akarjuk helyezni-egyik a másik fölé -, míg az 1-es és 4-es vonalakat egyenletesen kell elhelyezni, ügyelve arra, hogy a transzformáció eredete középpontba kerüljön.

két tulajdonságra fogunk támaszkodni: az opacitásra és a forgásra. Először is, ki akarjuk halványítani az 1-es és 4-es vonalakat, amelyeket az n-edik gyermek választóval lehet megcélozni.,

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

az egyetlen dolog, amit tehetünk, hogy a cél a két középvonal és forgassa őket 45 fokkal ellentétes irányban.

Chasing circles

  • mint látható: Better Brand Agency
  • a kód megtekintése
  • szerző: Steven Roberts

az animált loading ikon négy körből áll. A köröknek nincs kitöltése, de váltakozó lökettérfogatuk van.

a CSS-ben beállíthatunk néhány alapvető tulajdonságot az összes körünkre, majd a: nth-of-type választóval alkalmazhatunk egy másik löket-dasharray-t minden körre.,

ezután létre kell hoznunk a keyframe animációt. Animációnk nagyon egyszerű: mindössze annyit kell tennünk, hogy a kört 360 fokkal elforgatjuk. Azáltal, hogy átalakításunkat az animáció 50% – os jelére helyezzük, a kör az eredeti helyzetébe is visszafordul.

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

a létrehozott animációval most csak a köreinkre kell alkalmaznunk. Beállítjuk az animáció nevét; időtartam; iterációs szám és időzítési függvényt. A “könnyű-in-out” játékosabb érzést ad az animációnak.,

jelenleg a rakodónk van,de az összes elem egyszerre forog. Ennek kijavításához némi késedelmet alkalmazunk. A késéseinket egy Sass for loop segítségével 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 most egymás után animál, létrehozva az egymást üldöző körök illúzióját. Az egyetlen probléma ezzel az, hogy amikor az oldal először betölti, a körök statikusak, majd elkezdenek mozogni, egyenként. Ugyanazt az eltolási hatást érhetjük el, de az animációnkban a nem kívánt szünetet egyszerűen negatív értékre állíthatjuk.,

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

Next page: More CSS animation examples to explore