A CSS átmenetének megvalósítása: Az animációk készen vannak

Ez a cikk részletes és átfogó ismereteket nyújt a CSS átmenetekről és arról, hogyan adhat hozzá animációkat.

A weboldalon található animációk több felhasználót vonzhatnak. Tegye fel ezt a kérdést magának - ha olyan weboldalt látna, amely elég sok animációt tartalmaz, nem szeretne többet felfedezni? A CSS átmenetekkel néhány remek animációval életre keltheti munkáját. És ne feledd, ezeket jól kell csinálni. Fedezzük fel a CSS Transitions világát a következő sorrendben:



Miért CSS Transitions?

Vegyünk példát. Ha egy elem színét fehérről kékre változtatná, akkor ez a változás szinte azonnali. Az animáltabb hatás érdekében fokozatosan hajthatja végre ezt a változást. Ez vizuálisan is vonzónak tűnik. A CSS átmenetek engedélyezésével testre szabhatja a változások bekövetkezését. Megadhatja, hogy az elemek változásai hogyan történjenek egy adott időintervallumban, amelyek egy gyorsulási görbét követnek.



A CSS átmenetekkel meghatározhatja a változásokat elemek, a meghatározott időintervallumok, a gyorsulási görbe sebessége és még sok más. Mindezt megteheti Flash vagy JavaScript .

A jobb megértés érdekében hivatkozhat az alábbi képre:



CSS átmenetA fenti képen a HTML elem vörösből kékre változik egy másodperc alatt. A köztes színt is látni fogja, amikor az átmenet megtörténik. Ha nem CSS átmeneteket fog használni, akkor észreveszi, hogy a szín vörösről kékre azonnal változik - nem fogja látni a köztes színt. A CSS átmenetekkel animált hatást észlel, amikor a HTML elemek a régi állapotról az újra váltanak.

Az átmeneti tulajdonság

A gyorsírás átmeneti tulajdonság segítségével vezérelheti a CSS átmeneteket. Ennek a gyorsírásnak a használata nemcsak egyszerű, de elkerülheti a szinkronon kívüli paramétereket is, amelyek meglehetősen frusztrálóak lehetnek a CSS hibakeresésében.

Az átmenet tulajdonság megadja azokat a CSS tulajdonságokat, amelyekre az átmenet hatást szeretné elérni. Csak ezek a CSS tulajdonságok vannak animálva.



Szintaxis:

átmenet:

Kezdőként nehézségekbe ütközhet a gyorsírás használata során. Ha úgy gondolja, hogy a gyorsírás használata kissé bonyolult az Ön számára, akkor külön megadhatja az átmenet tulajdonságait. HTML elem esetén megadhatja az átmenet tulajdonságait egyenként, az alábbi példában látható módon:

div {szélesség: 100 képpont magasság: 100 képpont háttér: világoskék átmenet tulajdonság: szélesség átmenet időtartama: 2 s átmenet időzítés függvény: lineáris átmenet késleltetés: 1 s} div: lebeg {szélesség: 300 képpont}

Vigye az egérmutatót a doboz fölé

A fenti példában külön megadtuk a tulajdonságokat (átmenet-tulajdonság, átmenet-időtartam, átmenet-időzítés-függvény és átmenet-késleltetés). Rövidesen megismerjük ezeket az átmeneti tulajdonságokat.

Mit kell megadnia?

A CSS-átmenetek létrehozásához elsősorban két dolgot kell megadnia: a CSS tulajdonságot, amelyhez effektust kíván hozzáadni, és ennek a hatásnak az időtartamát.Egy dolgot szem előtt kell tartania - ha nem adja meg az időtartamot, az átállás alapértelmezett értéket vesz fel 0 , és nem lesz semmilyen hatása.

Vegyünk egy példát:

Az alábbi kód meghatározza a szélesség tulajdonság átmeneti hatását öt másodpercig.

div {szélesség: 100 képpont magasság: 100 képpont háttér: kék átmenet: szélesség 5 s} div: lebeg {szélesség: 600 képpont}

Vigye a kurzort a fenti div elem fölé, hogy lássa az átmeneti hatást.

hogyan készítsünk képernyőképet a szelén webmeghajtóban a java használatával

A fenti kódban látni fogja, hogy amikor a kurzort a kék mező fölé viszi, a kék mező fokozatosan növeli szélességét, öt másodpercig. Azt is észreveszi, hogy amikor eltávolítja a kurzort a kék mezőből, a kék mező fokozatosan (nem azonnal) visszatér eredeti méretéhez. Megváltoztathatja a szélesség és az időtartam értékeit is, hogy lássa, hogyan befolyásolja ez az átmenet tulajdonság a HTML elemet.

Az átmeneti effektust több tulajdonsághoz is hozzáadhatja. Ezt úgy teheti meg, hogy vesszővel választja el a tulajdonságokat. Vegyünk egy példát:

Az alábbi kódban az átmenet tulajdonság meg van adva a szélesség, a magasság és az átalakítás szempontjából.

div {kitöltés: 15px szélesség: 150px magasság: 100px háttér: zöld átmenet: szélesség 2s, magasság 2s, átalakítás 2s} div: lebeg {szélesség: 300px magasság: 200px átalakítás: forgatás (360deg)} Helló Világ 

(Vigye az egérrel rám)

A fenti példával láthatja, hogyan mozog a zöld mező, amikor a mező fölé viszi az egeret.

Csak a tulajdonságot és az időtartamot adtuk meg. Nézzük meg a többi paramétert különféle példákkal.

A Transition-timing-function Funkció tulajdonság

Ez a tulajdonság határozza meg az átmeneti hatás sebességgörbéjét. A következő értékeket veheti fel:

  • Könnyű érték: Ez az alapértelmezett érték, ahol a hatás az elején lassú, majd gyorsabb és lassan véget ér.
  • Lineáris érték: Ez a hatás nem változtatja meg az átmenet sebességét - az elejétől a végéig állandó marad a sebesség.
  • Könnyű érték: Ez a hatás lassan indul el.
  • Könnyítési érték: Ennek a hatásnak lassú a vége.
  • Könnyű be- és kikapcsolási érték: Ennek a hatásnak lassú a kezdete és a lassú vége is.
  • Köbös-bezier érték (n, n, n, n): A cubic-bezier függvényben megadhatja saját értékkészletét.

Az alábbi kód a lineáris, könnyű, könnyű be-be, a kimenő és a kimenő értékek átmeneti hatásait mutatja.

div {szélesség: 100 képpont magasság: 100 képpont háttér: rózsaszín átmenet: szélesség 2s} # div1 {átmenet-időzítés-függvény: lineáris} # div2 {átmenet-időzítés-függvény: könnyedség} # div3 {átmenet-időzítés-függvény: könnyebb-be } # div4 {átmenet-időzítés-függvény: könnyed-kimenet} # div5 {átmenet-idő-függvény: könnyed-be-ki} div: lebeg {szélesség: 300 kép)

Vigye az egérmutatót az alábbi div elemek fölé

lineáris
könnyedség
könnyû bejutás
könnyűség
könnyű be-be

Az átmenet-késleltetés tulajdonság

Néha azt szeretné, hogy egy animáció bizonyos időtartam után következzen be. Az átmenet-késleltetés tulajdonság lehetővé teszi az átmenet-hatás késésének megadását. A késleltetést másodpercben adhatja meg.

Vegyünk egy példát az átmenet hatásának késleltetésére:

div {szélesség: 100 képpont magasság: 100 képpont háttér: sárga átmenet: szélesség 3s átmenet-késleltetés: 1 s} div: lebeg {szélesség: 300 képpont}

Vigye az egérmutatót az alábbi div elem fölé

Jegyzet: Megfigyelheti azt a 1 másodperces késleltetést a hatás megkezdése előtt

A fenti kódban, amikor a kurzorral a sárga mező fölé viszi az egeret, észreveszi (egy másodpercig), hogy nincs hatása. Egy másodperc várakozás után észreveszi a hatást.

Ezzel véget értünk ennek a CSS Átmenetek cikknek. Most animációkat adhat hozzá weboldalaihoz. Próbálja ki ezeket a példákat.

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ákkal való együttműködés 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.

hogyan készítsünk képernyőképet a szelén webmeghajtóban a java használatával

Van egy kérdésünk? Kérjük, említse meg a „CSS Transition” blog megjegyzés rovatában, és kapcsolatba lépünk Önnel.