A CSS3 átmenetek és animációk használata az UI módosításainak kiemeléséhez

A tervezőknek és a művészeknek hosszú története van a mozgás, a hatások és a különböző illúziók kísérletezésére azzal a céllal, hogy egy további réteget hozzanak létre a munkájukhoz. Az op művészeti mozgalom az 1960-as években kezdett optikai illúziókat használni a mozgás benyomása érdekében.

Azóta az újabb és újabb megközelítések megjelentek, mint például a közelmúltban népszerű kinetikai művészet, amely a néző szemszögéből többdimenziós mozgást tesz lehetővé. A Motion is megjelent az informatikában az első villogó kurzor 1967-ben történő feltalálásával.

A front-end fejlesztés során a DOM elemeket általában a JavaScript animálja, mielőtt a CSS3 megjelent volna, és ez egy olyan módszer, amely még mindig működik, de a A CSS3 által bevezetett új tulajdonságok lehetővé teszik számunkra, hogy javítsuk a terveket különböző hatásokkal és mozgással intuitívabb módon.

A CSS3 két fő technikája az átmenetek és az animációk. Ebben a bejegyzésben megnézzük, hogy melyek azok, milyen különbség van közöttük, és hogyan használhatja őket.

Transitions

Az átmenetek és az animációk egyaránt használatosak vizualizálja az állam változásait egy HTML elemet egy vagy több CSS tulajdonságának módosítása.

Az államváltozás legegyszerűbb formája a gomb vagy a link színeinek megváltoztatása, amikor a lebegés látható. Amikor ez megtörténik, az elem enyhén eltérő stílust kap, amelyet általában a néző észrevesz, mintha valami mozogna a képernyőn.

A hivatkozás CSS tulajdonságainak megváltoztatása a lebegő (vagy fókuszált vagy kattintásos) oldalon az átmenet legrégebbi és legegyszerűbb formája, és jóval a CSS3 korszak előtt létezett.

 a szín: narancs;  a: lebeg szín: piros;  a: fókusz szín: kék;  a: látogatott szín: zöld; 

Az átmeneteket akkor használják, ha egy HTML elem egy előre meghatározott állapotból egy másikra változik. A CSS3 új tulajdonságokat vezetett be, amelyek a korábbinál kifinomultabb megjelenítéseket tesznek lehetővé, mint például az időzítési funkciók vagy az időtartam-szabályozás.

Megnézzük az új CSS tulajdonságokat a következő részben, miután megértettük, hogyan különböznek az animációk. Most nézzük meg a legfontosabb dolgokat, amiket tudni kell az átmenetekről.

1. Mindig van egy kezdete és vége.
2. A kezdő- és végpontok közötti állapotokat a böngésző implicit módon határozza meg, ezt nem lehet megváltoztatni a CSS-sel.
3. Szükségük van kifejezett kiváltás, például egy új pszeudoclass hozzáadása a CSS-nél, vagy egy új osztály a jQuery által.

Látható egy szép példa az intelligensen hasznosított CSS3 átmenetekre, amelyekben a szerző rejtett információt tárol fel olyan módon, amely nem tolakodó, de a felhasználóknak az új tartalomra összpontosít..

animációk

Ha bonyolultabb mozgásokkal szeretnénk megjeleníteni az állapotváltozásokat, vagy ha nincs kifejezett triggerünk, pl. ha el akarjuk indítani a hatást, amikor az oldal betöltődik, az animációk az út.

Az animációk lehetővé teszik egy összetettebb út meghatározását a saját beállításával és beállításával Kulcsképek. A képkockák az animáció során közbenső pontok, amelyek lehetővé teszik számunkra, hogy annyi alkalommal változtassuk meg az animált elem stílusát, amennyit csak akarunk.

Bár a CSS3 nagyszerű módokat kínál kifinomult animációk készítéséhez, általában nehezebb létrehozni őket, mint az átmenetek, ezért sok nagyszerű animációs könyvtár található, amelyek megkönnyíthetik munkánkat.

A CSS3 animációival kapcsolatos legfontosabb dolgok a következők:

1. nem igényelnek kifejezett kiváltást, elkezdhetik az oldal betöltését, vagy ha egy másik DOM esemény történik a böngészőben
2. akkor használhatók azokban az esetekben, amikor átmeneteket alkalmaznak, például amikor új osztályt vagy pszeudociklist adnak hozzá vagy távolítanak el (bár ez kevésbé gyakori használati eset)
3. megkövetelik, hogy definiáljuk néhány kulcsfontosságú keretet (köztes állapotok)
4. megadhatjuk a kulcsok számát, gyakoriságát és stílusát

Az alábbi példában hűvös animált legördülő menü látható. Az animáció akkor kezdődik, amikor a gombra kattintunk. Ez akkor érhető el, ha a kattintási esemény bekövetkezésekor jQuery-vel további osztályokat adunk hozzá.

Ezek az új osztályok a megadottakkal vannak animálva @keyframes szabályokat a CSS fájlban. A további osztályokat a jQuery eltávolítja, amikor a felhasználó a következő alkalommal rákattint a gombra, és a menü ismét elrejtődik.

CSS tulajdonságok és a @keyframes At-szabály

Az átmenetekhez használhatjuk a átmenet vagy rövidített vagy 4 egyszeri átmenethez kapcsolódó tulajdonság: átmenet-tulajdonság, átmenetifém-időtartam, átmenet-időzítés-funkció, és átmenetifém-késleltetés. A rövidített tulajdonság rövidített formában tartalmazza az összes tulajdonságot.

Az animációkhoz ott van a élénkség rövidített vagyon a kezünkben, amely nem kevesebb, mint 8 egyszeri animációs tulajdonságot jelent animáció-name, animáció időtartamú, animáció-időzítés-funkció, animáció késleltetés, animáció-iterációs-count, animáció-irányban, animáció-fill-módban, és animáció-play-state.

A legfontosabb dolog mind az átmenetek, mind az animációk során az, hogy mindig meg kell adnia a CSS tulajdonságokat, amelyeket az állapotváltozás során módosítani fog. Átmenetekkel így néz ki:

 .elem háttér: narancs; átmenet-tulajdonság: háttér; átmeneti időtartam: 3s; átmeneti-időzítési funkció: egyszerűség;  .elem: lebeg háttér: piros; 

Meghatározottuk a háttér tulajdonság, mert ez lesz az átalakulás során.

Egy átmenetben egynél több CSS tulajdonságot módosíthatunk, ebben az esetben a fenti kódot úgy módosítanánk, mint: átmenet-tulajdon: háttér, határ;. Használhatjuk a átmenet-tulajdon: mind;, ha nem szeretnénk minden egyes tulajdonságot külön megadni.

Kiválaszthatjuk a rövidítést átmenet ingatlan is. Ha így teszünk, mindig figyelni kell a belső tulajdonságok megfelelő sorrendjére (lásd a dokumentumok szintaxisát).

 .elem háttér: narancs; átmenet: háttér 3s könnyű;  .elem: lebeg háttér: piros; 

Ha animációt akarunk létrehozni, akkor meg kell adnunk a kapcsolódó elemeket Kulcsképek. A CSS tulajdonságokat külön kell definiálni @keyframes at-szabályokat. Íme egy példa arra, hogy hogyan tehetjük ezt:

 .elem pozíció: relatív; animáció-név: dia; animáció-időtartam: 3s; animáció-időzítés-funkció: egyszerűség;  @keyframes slide 0% left: 0;  50% left: 200px;  100% bal: 400px; 

A fenti példában nagyon egyszerű csúszóhatást hoztunk létre. Meghatároztuk a animáció-name, ezután 3 kulcsfontosságú keretet kötött hozzá, amelyeket a @keyframes slide … at-szabályokat. A százalékos arányok az animáció időtartamára utalnak, így a példában az 1.5-ösnél 50% -ban történik.

Használhatjuk a rövidítést élénkség tulajdonsága is lehet, vagy meghatározhatja a kulcsképeket az egyszerűbbé tól-ig szabályozza a következő módon:

 .elem pozíció: relatív; animáció: 3-as csúszások egyszerűsítése;  @keyframes slide balról: 0;  balra: 400px; 

A bonyolultabb animációk létrehozása saját művészeti formája, ha érdekli, két animációs oktatóanyagunkat olvashatja el, hogy miként hozhat létre egy fejlett marquee-t, és hogyan hozhat létre ugrálóhatást.

Ha átmenetet és animációt építünk, ezt tudnod kell nem minden CSS tulajdonság animálható, ezért mindig jó ötlet, hogy ellenőrizze a CSS Animatable-ben a módosítani kívánt ingatlant.

A CSS3 animációk és átmenetek hosszú ideje működtek együtt a szállító előtagjaival, amelyeket már nem kell használni, de a Mozilla Developer Network továbbra is ajánlja a -webKit egy ideig, mivel a Webkit-alapú böngészők támogatása csak a közelmúltban érte el a stabilitást.