Css átmenet (lineáris, könnyű)
CSS Átmeneti ingatlan telepítéséhez szükséges egy animált átmenet egyik állapotból a másikba. Animáció felhasználásával működik ál: hover és: aktív. azaz amikor elhaladnak egy objektum egyik állapotból a másikba.
Syntax CSS átmenet
A szintaxis néz ustroshayusche, de csak a tényt. Nézzünk egy egyszerű példát, hogy hogyan működik ez. Miután két példát lesz szó összes lehetséges értékek az egyes szintaxis elem:
Példák ingatlan Transition
Példa # 1. Animáció html történő áttéréssel
Az oldalon alakítjuk a következő
Nézzük ezt a példát részletesebben. Az ingatlan az átmenet: minden 1s lineáris felelős a zökkenőmentes átmenetet. Ha ő nem írt, nem lenne hirtelen átmenet. Hogy tisztában van a különbség, itt van egy példa nélküli az animációs hatás:
átmeneti kód: minden 1s lineáris a következőket jelenti:
- Az összes - sima akció érvényes minden ingatlan, arra utal, hogy a szín (color), háttér (háttér). Ehelyett minden írhat színe. majd a zökkenőmentes átmenetet fog terjedni csak a szín
- 1s - az az idő, amely egy átmeneti (beállítható milliszekundumban formátumban: 1000ms);
- lineáris - a tárgy megváltozik állandó sebességgel (lineáris). Vannak más lehetőségek hatások (az alábbiakban ismertetett)
Ahhoz, hogy az összes többi tárgy nem mozdult a növekvő a tér, akkor az ingatlan az átalakítás tulajdonság.
Example # 2. A növekedés a html mozgatása nélkül más tárgyak
Az oldalon alakítjuk a következő
Most az objektum nőtt, és nincs elmozdulás a többi tárgyat.
Nézzük részletesen, hogy milyen értékeket vehet fel az egyes paraméterek
Ingatlan értékének átmeneti
1. Paraméter átmenet-tulajdonság
átmenet-tulajdonság tulajdonság felelős a tulajdonságait az objektum, amely az animáció alkalmazzák. Lehet, hogy a következő értékeket
- összes - a teljes objektum (elhagyható, ha az idő be van állítva)
- szín - a szín a szöveg
- háttér - a szín a háttér objektum
- szélessége. magasság - változtatni a méreteit szélesség és magasság, illetve
- none - nincs animáció (az alapértelmezett minden eleme)
Aktiválásához több tulajdonságot, akkor lehet vesszővel elválasztva.
2. Paraméter átmenetifém-időtartam
Ez meghatározza azt az időtartamot, amely alatt az utolsó átalakítás. Ezt úgy mérjük, másodpercben (s) és milliszekundum (ms).
átmeneti idejű paraméter megadható egy külön ingatlan CSS:
3. Paraméter átmenetifém-időzítés-funkció
Ez egy fontos paraméter, amely meghatározza, hogy az átalakulás sebessége. Például, kezdetben az zamedleninem, vagy a végén.
Ahol az érték lehet:
- enyhíteni (alapértelmezett) - lassítja során a kezdő és a cél egyenértékű a paraméter köbös-Bezier (0,25, 0,1, 0,25, 1,0)
- lineáris - egyenletes sebességgel az egész átalakítási egyenértékű a paraméter köbös-Bezier (0.0, 0.0, 1.0, 1.0)
- enyhíteni-in - lassítja az elején, a paraméter megegyezik köbös-Bezier (0,42, 0, 1,0, 1,0)
- kiúsztatás - végén lassítási, egyenértékű paraméter köbös-Bezier (0, 0, 0,58, 1,0)
- enyhíteni-in-out - lassulási elején és a végén (hasonlóan enyhíteni, de különböző együtthatók sebesség) ekvivalens paraméter köbös-Bezier (0,42, 0, 0,58, 1,0)
- lépésről-start - azonnali, a paraméter egyenértékű lépéseket (1, start)
- lépésről-end - azonnali végrehajtás végén paraméter egyenértékű lépéseket (1, vége)
- harmadfokú Bézier görbe (a1, b1, a2, b2) - ez a feladat a saját változás mértéke
- az (a, b) - a változás rándulások
4. Paraméter átmenetifém-késleltetés
Beállítja a késleltetési idő kezdete előtt az átmeneti hatást. Mért másodpercben (s) és milliszekundum (ms)
Példa # 3. különböző késések
Korábban beszéltünk arról a lehetőségről, hogy különböző késéseket a transzformációk. Vegyük ezt a példát.
Az oldalon alakítjuk a következő
Példa komplex transzformációt késések
Nem minden böngésző támogatja az átalakulás. Ki kell használni az eladóval verzió CSS előtagokat.
- -ms-transzformáció eredetű - az IE9 és az idősebb (a kilencedik változata a transzformáció nem támogatott
- -WebKit-transzformáció eredetű - Chrome, Safari, Android és iOS
- -o-transzformáció eredetű - Opera verzió 12.10
- -moz-transzformáció eredetű - Firefox verzió 16.0