A CSS az egyik leghatékonyabb módja a weboldal interaktívvá tételének. Átalakítja alapjaink kinézetét és érzését honlap. Az egyik fontos és izgalmas funkció, amelyet a CSS kínál, az, hogy animációkat hajtsunk végre. Ez lehetővé teszi számunkra, hogy az elemeket az oldalunkon belül mozgassuk. Kezdjük az Animációk utazását a CSS-ben a következő sorrendben:
Animációk a CSS-ben
Animációk hozzáadása weboldalunkhoz nagyszerű módja a felhasználók figyelmének felhívására. Nemcsak értéket ad az oldalunknak, hanem gazdagítja a felhasználói élményt is. A CSS-ben az animáció két részre épül. Ők
- Kulcsképek
- Élénkség
A CSS animációkat minden böngésző támogatja. Néhány régebbi böngésző, például a Safari (akár a 8.0 verzióig) előtagot (-webkit-) igényel az animációs tulajdonságok értelmezéséhez. Például:
.anim {magasság: 200px szélesség: 200px háttér: világoskék pozíció: relatív szegélysugár: 100% -webkit-animation-name: cssanim / * régi böngészők * / -webkit-animation-duration: 5s / * régi böngészők * / animation -name: cssanim animation-duration: 5s} / * régi böngészők * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {maradt: 300px}}Felülről használhatjuk a minta html-oldalt, és a CSS-kódot helyettesíthetjük a stíluscímkében további példák kipróbálására.
Kulcsképek a CSS-ben
Ez az animációk építőköve a CSS-ben. Meghatározta az animáció sajátos pillanatait és stílusait a weboldalunkon. Más szavakkal, amikor megadjuk a @ kulcskereteket a CSS-en belül, megkapja az irányítást, hogy az aktuális állapotot új állapotra módosítsa, vagy az objektumokat egy bizonyos időtartamra animálja.
A @kulcsképeknek bizonyos tulajdonságokkal kell rendelkezniük az animáció vezérléséhez, mint például az animáció neve, szakaszai és tulajdonságai.
Név - Minden animációhoz meg kell adni egy nevet, amely leírja a viselkedését.
Szakasz - A színpad egy animáció befejezését jelenti. Megtehető a „to” és a „from” kulcsszóval vagy százalékban jelölve, míg 0% az animáció kezdő állapotát és 100% az animáció végállapotát jelenti. A százalékos reprezentáció használatának az az előnye, hogy több közbenső szakaszt definiálhatunk közöttük, azaz mi legyen az animáció viselkedése 50% -os vagy 75% -os stb. Szakaszban stb.
Tulajdonságok - Ezek a tulajdonságok lehetővé teszik a @keyframe-ek feletti irányítást, hogy manipulálhassuk őket az animáció során.
.anim {magasság: 200px szélesség: 200px háttér: világoskék pozíció: relatív szegélysugár: 100% animáció-név: cssanim animáció-idő: 5s} @ kulcskeretek cssanim {0% {transzformáció: skála (0.5) átlátszatlanság: 0} 50 % {transzformáció: skála (1,5) átlátszatlansága: 1} 100% {transzformáció: skála (1)}}Most, hogy tisztában vagyunk a kulcsképek meghatározásával. Fedezzük fel az animációs tulajdonságokat, hogy leírjuk, hogyan animálhatjuk elemeinket és tárgyainkat. A két tulajdonság, azaz az öröklődés és az inicializálás az összes animációs típusnál használható. Ezeket a tulajdonságokat általában a div címkével együtt használják különböző viselkedésmódok megjelenítésére.
a kezdeti: Ezt a tulajdonságot az alapértelmezett értékre állítja.
örököl: Örökli ezt a tulajdonságot a szülő eleméből.
Animáció tulajdonságai
- animáció-név
Megadja az animáció nevét, amelyet a @keyframes a manipulációhoz használ.A lehetséges értékek:
- név: Ez adja meg az animáció kulcsképéhez kötendő nevet.
- egyik sem: Ez az alapértelmezett érték, és felhasználható az öröklött vagy lépcsőzetes animációk felülírására.
Szintaxis:
animáció-név: név | egyik sem kezdeti | örököl
.anim {magasság: 200px szélesség: 200px háttér: világoskék pozíció: relatív szegélysugár: 100% animáció-név: cssanim animáció-időtartam: 5s} @ kulcskeretek cssanim {0% {left: 0px} 100% {left: 300px} }- animáció-időtartam
Meghatározza, hogy egy animáció mennyi ideig tart egy végrehajtás befejezéséhez. Ez másodpercekben vagy milliszekundumokban (pl. 4 vagy 400 ms) van megadva. A tulajdonság alapértelmezett értéke 0, tehát ha ez a tulajdonság nincs megadva, akkor az animáció nem fog megtörténni.
Szintaxis:
php print_r karakterláncra
animáció-időtartam: idő
.anim {magasság: 200px szélesség: 200px háttér: kék helyzet: relatív szegélysugár: 100% animáció-név: cssanim animáció-időtartam: 4s} @keyframes cssanim {0% {transzformáció: skála (0.4) átlátszatlanság: 0} 50 % {transzformáció: skála (1.4) átlátszatlansága: 1} 100% {transzformáció: skála (1)}}- animáció-késleltetés
Az animáció-késleltetés tulajdonság lehetővé teszi számunkra, hogy meghatározzuk az animáció késleltetését. Meghatározza, hogy egy animációs sorozat mikor kezdje el a végrehajtást.
Ennek a tulajdonságnak az értéke másodperc (ek) ben vagy milliszekundumban (ms) megadható. Pozitív és negatív értékeket egyaránt tartalmazhat. A pozitív érték azt jelzi, hogy az animáció a megadott idő letelte után indul, és addig nem marad egyhangú. Másrészt egy negatív érték azonnal elindítja az animációt attól a ponttól, mintha egy meghatározott időkereten belül már végrehajtaná.
Szintaxis:
animáció-késleltetés: idő
.anim {magasság: 200px szélesség: 200px háttér: világoskék helyzet: relatív szegélysugár: 100% animáció-név: cssanim animáció-időtartam: 4s animáció-késleltetés: 4s} @keyframes cssanim {0% {left: 0px} 100% {balra: 250px}}- animáció-iteráció-szám
Ez a tulajdonság azt jelzi, hogy hányszor kell lejátszani az animációs sorozatokat. A tulajdonság alapértelmezett értéke 1.A lehetséges értékek:
- szám - az iterációk számát jelöli
- végtelen - azt jelzi, hogy az animációnak örökké meg kell ismételnie
Szintaxis:
animáció-iteráció-szám: szám | végtelen
.anim {magasság: 200px szélesség: 200px háttér: világoskék pozíció: relatív szegélysugár: 100% animáció-név: cssanim animáció-időtartam: 2s animáció-iteráció-szám: 4} @keyframes cssanim {0% {left: 0px} 100% {maradt: 100px}}- animáció-irány
Meghatározza az animáció irányát. Az elem iránya előre, hátra vagy váltakozó ciklusokban állítható be.Ennek a tulajdonságnak az alapértelmezett értéke normális, és minden ciklusban visszaáll.A lehetséges értékek:
Normál - Ez az alapértelmezett viselkedés, és az animáció előre játszódik. Minden ciklus után az animáció a kezdeti állapotba kerül, és újra előre játszódik
fordított - Az animációt visszafelé játsszák. Minden ciklus után az animáció a végállapotába kerül, és visszafelé játssza
váltakozó - Az animáció iránya megfordul, azaz előbb, majd visszafelé játszik minden ciklusban. Minden páratlan ciklus előre animációt és minden páros ciklus visszafelé mozog.
váltakozó-hátramenet - Az animáció iránya váltakozva fordul meg. Itt az animációt először visszafelé, majd előre viszik minden ciklusban. Minden páratlan ciklus hátra vagy hátra mozog, és minden páros ciklus előre animál.
Szintaxis:
animáció-irány: normális | fordított |póttag | váltakozó-hátramenet
.anim {magasság: 200px szélesség: 200px háttér: világoskék pozíció: relatív szegélysugár: 100% animáció-név: cssanim animáció-időtartam: 2s animáció-iteráció-szám: végtelen} @keyframes cssanim {0% {left: 0px} 100% {maradt: 100px}}- animáció-időzítés-funkció
Ez a tulajdonság meghatározza az animáció sebességgörbéjét vagy mozgásstílusát. Azt rendelték hozzá, hogy az animáció stílusát simán megváltoztassa egyik formáról a másikra. Ha nincs hozzárendelve érték, akkor az alapértelmezés szerint megkönnyíti.Az animáció-időzítés funkció lehetséges értékei:
könnyedség - Ez az ingatlan alapértelmezett értéke. Itt az animáció lassan indul, fokozatosan gyorsul felfelé, majd lassan véget ér.
lineáris - Az animáció ugyanazt a sebességet tartja fenn a ciklus alatt, azaz elejétől a végéig.
könnyű bejutás - Az animáció lassan indul.
rendezési módszer c ++
könnyûség - Az animáció lassan véget ér.
könnyedén ki-be - Az animáció lassan mozog mind a kezdet, mind a vége alatt.
köbös-bezier (n, n, n, n) - Ezzel a speciális funkcióval hozzunk létre egy egyedi időzítési funkciót a saját értékeink meghatározásával. A lehetséges érték 0 és 1 között mozog.
Szintaxis:
animáció-időzítés-függvény: lineáris | könnyedség | könnyűség | könnyű-be | könnyű be-be |köbös-bezier (n, n, n, n)
.anim {magasság: 200px szélesség: 200px háttér: világoskék helyzet: relatív szegélysugár: 100% animáció-név: cssanim animáció-időtartam: 2s animáció-irány: fordított} @keyframes cssanim {0% {háttér: narancs bal: 0px } 50% {háttér: sárga bal: 200px felső: 200px} 100% {háttér: kék bal: 100px}}- animáció-kitöltési mód
Ez egy különleges tulajdonság, mivel meghatározza az animáció stílusát az animáció lejátszása előtt vagy után.Mint alapértelmezés szerint, az elem stílusát nem befolyásolja az animáció a kezdete előtt vagy után. Ez a tulajdonság hasznos, mivel segít felülírni az animáció ezen alapértelmezett viselkedését.Az animáció-kitöltés mód tulajdonság értékei a következők:
egyik sem - Ez a tulajdonság alapértelmezett értéke, vagyis az animációs stílusokat nem alkalmazzák az elemre, az animáció előtt vagy után.
előre - A stílusokat az elem megtartja a végső animációs sorozatban, azaz az animáció befejezése után.
visszafelé - A stílusokat az elem megtartja a kezdeti animációs sorozatban, azaz mielőtt az animációt bámulják, különösen az animáció késleltetése alatt.
mindkét - Ez azt jelenti, hogy az animáció mindkét irányban, azaz előre és hátra fog követni
Szintaxis:
animáció-kitöltési mód: nincs | előre | visszafelé | mindkét
.anim {width: 50px height: 50px background: világoskék szín: white font-weight: bold vastagság: relatív animáció-név: cssanim animation-duration: 5s animáció-iteráció-szám: végtelen szegély-sugár: 100%} # anim1 { animáció-időzítés-függvény: könnyedség} # anim2 {animáció-időzítés-függvény: lineáris} # anim3 {animáció-időzítés-függvény: könnyedén bekapcsolás} # anim4 {animáció-időzítés-függvény: könnyítés-ki} # anim5 {animáció- timing-function: eas-in-out} @keyframes cssanim {{balról: 0px} - {left: 400px}}- animáció-játék-állapot
Ez a tulajdonság megad egy animációt lejátszási vagy szüneteltetett állapotban. Továbbá, amikor az animáció szüneteltetéséből folytatódik, onnan indul, ahonnan elhagyta.A lehetséges értékek:
- játszik - Az animáció futásban történő megjelenítéséhez
- szünetelt - Az animáció szünet állapotban történő megjelenítése.
Szintaxis:
animáció-játék-állapot: szüneteltetve | játszik
.anim {width: 100px height: 100px background: lightblue position: relatív animation-name: cssanim animation-duration: 3s animation-delay: 2s animation-fill-mode: hátra szegélysugár: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- élénkség
Ez az animáció gyorsírási tulajdona. Tisztább kódokhoz használják. Miután megszoktuk az összes animációs tulajdonságot, javasoljuk, hogy az animáció gyorsírását használjuk a gyorsabb kódoláshoz és az összes tulajdonság egyetlen sorban történő meghatározásához.
Szintaxis:
animáció: [animáció-név] | [animáció időtartama] | [animáció-időzítés-függvény] |[animáció-késleltetés] | [animáció-iterációszám] | [animáció-irány] |[animáció-kitöltési mód] | [animáció-játék-állapot]
Az összes animációs effekt, amelyet a fentiekben mutatunk be különböző animációs tulajdonságok segítségével, elérhető a gyorsírás használatávalélénkség ingatlan.
.anim {magasság: 200px szélesség: 200px háttér: világoskék pozíció: relatív szegélysugár: 100% animáció-név: cssanim animáció-időtartam: 2s animáció-irány: normál animáció-lejátszási állapot: szüneteltetve @ @ keyframes cssanim {0% {háttér: narancssárga felső: 0px} 50% {háttér: sárga bal: 200px felső: 200px} 100% {háttér: kék bal: 100px}}Ezzel befejeződött a CSS-ben használható összes animációs tulajdonság. Meg kell próbálnunk ezen tulajdonságok különböző variációit, hogy tisztább képet kapjunk. Amikor jól érezzük magunkat, az animációs gyorsírás tulajdonság nagy segítséget jelenthet a tisztább és gyorsabb kód megírásában. Ez az egyik fontos képesség, amelyet a webfejlesztőknek el kell sajátítaniuk a CSS-ben. Mivel hajlamosak vagyunk inkább a mozgó, mint a statikus tárgyakra koncentrálni, az animációk segíthetnek ennek megvalósításában, és nagyszerű figyelemre méltó weboldalakat is kifejlesztenek.
Nézze meg a mi oldalunkat amely oktató által vezetett élő képzéssel és valós projekt-tapasztalattal jár. Ez a képzés elsajátítja a back-end és a front-end webes technológiák használatának képességeit. Ez magában foglalja a webfejlesztés, a jQuery, az Angular, a NodeJS, az ExpressJS és a MongoDB képzését.
Van egy kérdésünk? Kérjük, említse meg az „Animációk a CSS-ben” blog megjegyzés rovatában, és kapcsolatba lépünk Önnel.