Hogyan készítsünk szövegesebb CSS-t

A CSS animáció használata

Kísérleti:Ez egy kísérleti technológia
Mivel a technológia specifikációja még nem stabilizálódott, lásd a különböző böngészők használatával kapcsolatos kompatibilitási táblázatot. Megjegyezzük továbbá, hogy a kísérleti technológia szintaxisa és viselkedése változhat a böngészők jövőbeni verzióiban, a specifikáció változásai után.

A CSS animációk lehetővé teszik, hogy animáljon átmenetek egy konfigurációját a CSS stílusok egy másikba. CSS-animációk két komponensből áll: a stílus leírását animáció és egy sor kulcsfontosságú keretek, amelyek meghatározzák a kezdeti, véges és esetleg közbenső állapotát animációs stílusok.

A CSS animáció három előnye a hagyományos módon:

1. Könnyű használat egyszerű animációkhoz; Létrehozhat egy animációt, nem ismeri a JavaScriptet.
2. Az animációk jól működnek a mérsékelt rendszerterhelésekkel is. Egyszerű animációk a JavaScript-en, ha rosszul íródnak, gyakran rosszul teljesítenek. A motor használhatja a keret-kihagyást és más technikákat, hogy mentse a teljesítményt ilyen magas szinten .
3. Lehetővé teszi a böngésző számára az animáció sorrendjét, ezáltal optimalizálja a böngésző termelékenységét és hatékonyságát. Például gyakoriságának csökkentésére frissítésével animációs képkockák a jelenleg unimpised lapok.

Animáció konfigurálása

A CSS animáció létrehozásához hozzá kell adnia az animálni, a tulajdonságot vagy az elnyomását.Ez lehetővé teszi, hogy beállíthassa az animáció gyorsulását és időtartamát, valamint az animáció más adatait. Nem fogja segíteni az animáció megjelenését, amely az (EN-USA) használatával van konfigurálva, tovább tartja az animáció sorrendjének meghatározását a kulcskeretek segítségével.

Az ingatlan a következő jelek vannak:

Meghatározza a nevet (EN-USA), az animációs keretek konfigurálása.Meghatározza azt az időt, amelyen az animáció egy ciklusának át kell mennie.Állítsa be az animáció gyorsulását.Beállítja az elem betöltésének idejét és az animáció kezdési idejét.Meghatározza a felújítás számát; Az animáció végtelen ismétlésének értékét használhatja.Lehetővé teszi az egyes ismétlési animációval az alternatív útvonal eléréséhez, vagy az összes érték visszaállítása és az animáció ismétlése.Beállítja az animáció által használt értékeket a végrehajtás előtt és után.Lehetővé teszi, hogy felfüggeszti és folytassa az animációt.

Az animációs szekvencia meghatározása kulcskeretekkel

Az animáció konfigurálása (időtartama, gyorsítása) után kimutatható. Ez két és több kulcskeret segítségével történik (EN-USA). Minden keret leírja, hogy az animált elem hogyan néz ki.

Míg az időbeli akupunktúrás (animáció időtartama) az animált elem stílusain szerepel, kulcsfontosságú keretek az animáció riasztási szakaszának meghatározásához. 0% az animáció kezdetét jelenti, és% vége. Mivel ezek az értékek nagyon fontosak, különleges szavakkal jöttek létre nekik: és .

Az animáció közbenső állapotát jellemző kulcsfontosságú karaktereket is hozzáadhatja.

Példák

Figyelem: Az alábbi példák nem használnak előtagokat a CSS stílusokhoz . A webkit böngészők és a többi böngésző régi verzióinak meg kell adniuk az előtagokat a CSS stílusokban.Példák, amelyre kattintva a böngésző is tartalmazhatnak előtagokat -Webkit-.

Csúszás szöveg

Ez az egyszerű példa a böngészőablak jobb szélétől a szöveges csúszlapot animálja az elemben.

Ne feledje, hogy az animáció az oldal szélesebbé teszi a böngészőablakot. Ez elkerülhető úgy, hogy olyan elemet helyez el, amely a tartályba kerül, és beállíthatja azt .

Az elem használatával az ingatlan használatával jelzik, hogy az animáció kialakítása az elejétől a végéig 3 C-ig kell lennie, és hogy az animációt leíró (EN-USA) nevét “slutein” -ként definiálják.

Hozzáadhat más egyedi stílusokat az elemhez, hogy valahogy díszítse azt, de itt csak az animáció hatását szeretnénk bizonyítani.

A szabály használatával meghatározott kulcsszavak (EN-USA). Ebben az esetben csak két kulcskorongunk van. Az első 0% animációnál (). Itt adunk egy elemet a% és a szélesség% -ban (a szülőelem szélességének háromszorosa). Ez az oka, hogy amikor az első keret animáció, a cím a böngészőablak jobb szélén kívül esik .

A második kulcskeret (a) meghatározza az animáció végét, t.E (%). A bal oldali francia bekezdés 0, és a szélesség%. Minden úgy néz ki, mintha a cím a böngészőablak bal szélére vitorlázik.

(Frissítse az oldalt az animáció megtekintéséhez, vagy kattintson a Codepen gombra, hogy lejátssza a CODEPEN ablakban)

Más kulcskeretek hozzáadása

Adjunk hozzá más kulcskereteket az előző példában. Tegyük fel, hogy a fejléc betűmérete ideiglenesen megnövekedett, amikor balra mozog, majd visszatért a kezdeti értékre . A következő kulcskeret használatával könnyen megvalósítható:

Ez azt mondja a böngészőnek, hogy az animáció 75% -ánál a betűtípusnak% -nak kell lennie, és a szélesség%.

(Frissítse az oldalt az animáció megtekintéséhez, vagy kattintson a Codepen gombra, hogy lejátssza a CODEPEN ablakban)

Az ismétlés beállítása

Az ismétlés konfigurálásához hozzá kell adnia az ingatlant, és be kell állítania a hivatkozást, megegyezik az animációk megismétlésével . Ebben az esetben állítsa be a végtelen ismétlés értékét:

A szöveg jobbra és balra mozog

Tehát konfiguráltuk az ismétlést, de van valami furcsa: a szöveg minden ismétlésével ismét “ugrik” a böngészőablak szélén. Amit akarunk, így a szöveg balra és jobbra mozog. Ez könnyen megvalósítható az ingatlan tulajdonság beállításakor:

A rövid kódok használata

A shortcode hasznos a kód megmentéséhez. Például az e cikkben használt szabály:

Helyettesíthető:

Figyelem: További információ erről a szakasz oldalon

Állítsa be a több értéket animációs tulajdonságokat

A CSS ingatlan animációja több értéket is elválaszthatja vesszővel.Használható több animációs érték meghatározására egy szabályban, hogy különböző időtartamot állítson be, az ismétlések száma t.D., Különböző animációkhoz. Fontolja meg néhány példát, hogy megnézze a különbséget.

Az Animációs név tulajdonságainak első példájában három érték van telepítve, az időtartam tulajdonságai és az ismétlések száma egy. Ebben az esetben mindhárom animáció azonos időtartammal és ismétlések számával rendelkezik:

A második példában három értéket telepítenek az egyes tulajdonságokhoz. Ebben az esetben minden egyes animáció az egyes tulajdonságok megfelelő értékeivel történik, például a C időtartama és a 2, és a t ismétlések száma.D.

A harmadik példában három animációs névértéket határoznak meg, de két időtartam értéket és az ismétlések számát. Abban az esetben, ha az értékek száma nem elegendő minden egyes animációhoz, az értékeket ciklikusan vesszük az elejétől a végéig. Például a kiterjesztés S, és -5s lesz. Az időtartam értékei véget érnek, most már az első – megkapja az időtartamot. Az ismétlések számának (valamint egyéb ingatlanok) értékét ugyanúgy határozzák meg.

Animációs események használata

További ellenőrzést kaphat az animáció felett, valamint hasznos információkat az animációs események segítségével. Ezek az események által benyújtott tárgy (EN-US) lehet használni annak meghatározására, ha az animáció kezdetén vagy végén vagy az új iteráció kezdődik. Minden esemény az idő időpontja, amikor történt, valamint az eseményt okozó animáció neve.

Módosítjuk a szöveget, hogy adjunk meg néhány információt az egyes animációs eseményről. Így láthatjuk, hogyan működik.

CSS hozzáadása

Kezdjük a CSS hozzáadásával. Az animáció 3 másodpercig tart, hívják “slutein” -nek, majd 3-szor megismétlődik, valamint az animáció iránya telepítette. A kulcsfontosságú keretekben (EN-USA) a szélesség és a bal oldali nyugdíjazás ilyen értékei vannak felszerelve, hogy az elem csúszik a képernyőn.

Animációs eseménykezelő hozzáadása

A JavaScriptet használjuk az összes három lehetséges animációs esemény nyomon követéséhez. A következő kód konfigurálja a kezelőt; Hívjuk, amikor a dokumentumot először betölti.

Ez meglehetősen szabványos kód; További információt kaphat a dokumentációban . Az utolsó dolog, amely ezt a kódot az animált elem “slutein” osztályának telepítése; Megtesszük az animációt.

Miért? Mivel a mi esetünkben az esemény akkor következik be, amint az animáció kezdődik, és ez korábban történik, mint a parancsfájlunk. Tehát önmagukban képesek vagyunk ellenőrizni az animáció kezdetét úgy, hogy beilleszti az “Slidein” osztályt egy animált elemre.

Az események nyilvántartása

Az eseményeket az alábbiakban bemutatott funkciókra továbbítják.

Ez a kód is nagyon egyszerű. Ez a kód monitorja az esemény típusának meghatározásához, és hozzáad egy elemet az esemény kijelentkezéséhez.

A kimenet, amikor az animáció véget ér, akkor a következő módon fog kinézni:

• Elkezdődött: Az eltelt idő 0
• Az új hurok időben kezdődött
• Az új hurok időben kezdődött
• Véget ért: eltelt idő

Ne feledje, hogy a kimeneten megadott idő és a stílusban rámutatott idő nem egyeznek meg. Megjegyezzük továbbá, hogy az iteráció vége után nem küld eseményt; Esemény küldése helyett .

Html

A teljes kép kedvéért adja meg a HTML jelölő kódot. A jelölésnek van egy UL címke, amely az összes információt jeleníti meg:

Lásd még