A weboldalon lévő képek nagyításának számos módja van. Megvizsgálunk számos módot a képek nagyítására további szkriptek használata nélkül, csupán html és CSS használatával.

Az ilyen módszerek lehetővé teszi az eredeti gyors megtekintését, mivel nincs további szkriptek betöltése, azonban ha az eredeti képeket gyönyörű effektusokkal rendelkező szkriptekkel szeretné megnyitni, vagy galériát szeretne létrehozni, javaslom, hogy figyeljen a következő cikkekre:

Tettem egy lírai kitérőt, kezdjük.

Kép nagyítása a weboldalon

Előnye, hogy nem kell külön miniatűrt készíteni az eredeti képhez. Itt csak egy képről van szó

A kurzor mozgatásakor kinagyítja a webhelyen lévő képet

Az első és legegyszerűbb módja nagyítsa ki a képet az oldalon, a következő kód hozzáadása a kép tulajdonsághoz az img címkék között:

onmouseover="this.style.width="az eredeti kép szélessége px-ben (vagy auto)"" onmouseout="this.style.width="a kicsinyített kép szélessége px-ben""

Ez azt jelenti, hogy ha egyszer rámutat a kurzorra, a kép nagyobb lesz.

Teljes kód:

img.bg ( kurzor: pointer; max-width: 100px; // a miniatűr szélessége; ) img.bg:hover ( max-width: nincs; )

Az utolsó pedig a legszebb módja annak, hogy az egérmutatót a segítségével nagyítsa ki. Itt keretet és leírást adunk a nagy képhez.
Kód:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

/* Ha a kép nem kapcsolódik másik oldalra, hagyja a hivatkozást másként Ellenkező esetben nem fog működni IE6-ban */ .ienlarger ( float: left; clear: none; /* Beállíthatod a balra vagy a jobbra szükség szerint */ padding-bottom: 5px; padding-right: 5px; ) .ienlarger a ( display:block ; text-decoration: none stílusok; pozíció : abszolút; kijelző: nincs; szín: #FFCC00; szövegdekoráció: nincs; betűcsalád: Arial, Helvetica, sans-serif; betűméret: 13 képpont; // Leírás betűméret; háttérszín: # 0000ff; - webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-weight: bold; padding-top: 10px; padding-top: 10px; padding-bottom: 13px; padding-left : 10px; .ienlarger img ( border-width: 0; ) .ienlarger a:hover span ( display:block; top: 10px; // A nagy kép 10 képponttal az indexkép felső széle alatt jelenik meg; bal: 40 képpont; // Nagyban a kép 40 képponttal jobbra jelenik meg az indexkép bal széléhez képest; z-index: 100; ) .resize_thumb ( szélesség: 100 képpont; // Ide írja be a kívánt miniatűr méretét; magasság: auto; ) A kép leírása.

/* Ha a kép nem kapcsolódik másik oldalra, hagyja a hivatkozást másként Ellenkező esetben nem fog működni IE6-ban */.ienlarger ( float: left; clear: none; /* Beállíthatja balra vagy jobbra szükség szerint */ padding-bottom: 5px; padding-right: 5px;).ienlarger a ( display:block ; text-decoration: none stílusok; pozíció : abszolút; kijelző: nincs; szín: #FFCC00; szövegdekoráció: nincs; betűcsalád: Arial, Helvetica, sans-serif; betűméret: 13 képpont; // Leírás betűméret; háttérszín: # 0000ff; - webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-weight: bold; padding-top: 10px; padding-top: 10px; padding-bottom: 13px; padding-left : 10px;).ienlarger img (border-width: 0;).ienlarger a:hover span ( display:block; top: 10px; // A nagy kép 10px-el az indexkép felső széle alatt jelenik meg; balra : 40px; // Nagyban a kép 40 képponttal jobbra jelenik meg az indexkép bal széléhez képest; z-index: 100;).resize_thumb ( szélesség: 100px; // Ide írja be a kívánt miniatűr méretét; magasság: automata ;)
A kép leírása.

A weboldalon található kép kattintással nagyítható

A kattintással nagyítandó képmód hasonló a legelső hover-to-zoom módszerhez, de az onmouseover helyett az onclicket fogjuk használni.

Eredmény:

Mint látható, itt a kép nagyításához rá kell kattintani, és ha eltávolítja a kurzort, akkor automatikusan kicsinyíti.

A következő verzióban nagyítsa ki a képet az oldalon kattintásra a következőket fogjuk használni:

.click (szélesség: a miniatűr kép szélessége px-ben; kurzor:mutató; display:inline;).click:focus (szélesség: az eredeti kép szélessége px-ben (vagy automatikus); z-index:100;)

Itt a kép kicsinyítéséhez, azaz eredeti méretének visszaállításához a weboldal bármely pontjára kell kattintani.

Eredmény:

Egy másik használható lehetőség a kép nagyítása a szöveg tetejére kattintva. Itt a következő kódot használjuk:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

.blokimg (pozíció: relatív;) .overlay( kijelző: nincs; magasság: auto; pozíció: abszolút; szélesség: auto; z-index: 999; ) .overlay .overlay_container( kijelző: táblázat-cella; függőleges igazítás: közép ; ) .overlay_container img( háttérszín: zöld; padding: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; ) .overlay:target ( kijelző: táblázat; )

.blokimg (pozíció: relatív;).overlay( kijelző: nincs; magasság: auto; pozíció: abszolút; szélesség: auto; z-index: 999;).overlay .overlay_container( display: table-cell; függőleges igazítás: középen ;).overlay_container img( háttérszín: zöld; padding: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;).overlay:target (megjelenítés: táblázat;)

Több lehetőséget is megvizsgáltunk nagyítsa ki a képet az oldalon: a legegyszerűbbtől a kicsit bonyolultabbig html és . Használja bármelyiket a webhelyein további szkriptek nélkül.

Sziasztok! Sokáig kerestem egy egyszerű módot, hogy simán kinagyítsam a képet, ha rámutatunk rá. Az interneten leírt módszerek többsége a jQuery stb. használatát javasolja, ami véleményem szerint kissé felesleges. Van egy meglehetősen elegáns megoldás a CSS3 használatával.

HTML

Először el kell készítenie a html jelölést:

Képek előkészítése

Minden képet egy div-be csomagoltunk, amelynek zoom_img osztálya van

CSS

Térjünk át a stílusokra, először a zoom_img osztályra:

Zoom_img ( túlcsordulás:rejtett; szélesség:390px; magasság:244px; )

A blokk méretének meg kell egyeznie a kép méretével, és hozzá kell adni az overflow:hidden; hogy semmi se lépje túl a blokk méretét, erről lentebb.

Kicsinyítés 1.1); -moz-transzformáció: skála(1.1); -o-transzformáció: skála(1.1); )

Az animáció a CSS3 átmenet és átalakítás paramétereinek használatával történik. Az animáció ideje 1 másodperc. skála(1,1) – azt jelzi, hogy a képet 1,1-szeresére kell nagyítani; ha kétszer kell nagyítani, akkor 2-re kell állítani.

És itt vissza kell térnie az overflow:hidden; paraméterhez. osztályban.zoom_img. Mivel semmi sem megy túl a div-en, az a hatás jön létre, hogy a kép egyre közelebb kerül, ha túlcsordul: rejtett; távolítsa el, látni fogja, hogy a kép mérete megnő.

Ez minden mára.

Természetesen számos módja van a képek nagyításának. És főként a szkriptek és a bővítmények használata használatos. Véleményem szerint az ilyen módszerek indokoltak olyan források esetében, amelyekben rengeteg fénykép vagy bármilyen kép található. Az én blogom nem ilyen. És szokás szerint a legkevesebb idő-, tudás- és erőforrás-ráfordítás útját követem az oldalamon.

Felajánlok egy módot arra, hogy szkriptek használata nélkül, kizárólag html használatával nagyítsa ki a képeket egy weboldalon.

A webhelyen lévő kép nagyításának ez a módszere lehetővé teszi az olvasó számára, hogy gyorsan láthassa a képet, mivel webhelyének nem kell további szkripteket betöltenie.

Kép nagyítása a weboldalon 1. módszer – a kurzor mozgatásakor nagyítsa ki a képet a webhelyen

Egy nagyon egyszerű, nos, a legegyszerűbb módja, őszintén. A következő kódot kell hozzáadnia a kép tulajdonságaihoz:

Onmouseover="this.style.width="Nagy képszélesség px"" onmouseout="this.style.width="Kis képszélesség px""

Ha az egérmutatót mozgatja, a kép megnagyobbodik.
Remélem megérted, hogy mindez egy szövegszerkesztőben történik.

2. módszer – az egérrel kattintva nagyítsa ki a képet a webhelyen

A módszer hasonló, csak le kell cserélni az onmouseovert az onclick-re. A következő kód kerül hozzáadásra a kép tulajdonságaihoz:

Style="width: "a kis kép szélességi értéke px; border:2px solid black;" onclick="this.style.width=nagy képszélesség px"" onmouseout="this.style.width="kis képszélesség px""

Teljesen így fog kinézni

Itt van a punci kép eredménye és kódja.
Ha rákattint az egérrel, a kép az eredeti kép méretére vagy az Ön által megadott méretre lesz nagyítva. A méret csökkentéséhez, vagyis a kép eredeti méretének visszaállításához kattintson az oldal tetszőleges pontjára.

Remélem, nem esett nehezére az ilyen módszerek használata - html használatával - a képek nagyításához az oldalon.

Általánosságban úgy gondolom, hogy sok webmester nem korlátozza magát egyetlen motor használatára, és html kódokat használ webhelyén.

Olvassa el még:

2015-10-27T16:07:59+00:00 Nadezhda Szkriptek és kódok nagyító képek az oldalon, képek nagyítása az oldalon

Természetesen számos módja van a képek nagyításának. És főként a szkriptek és a bővítmények használata használatos. Véleményem szerint az ilyen módszerek indokoltak olyan források esetében, amelyekben rengeteg fénykép vagy bármilyen kép található. Az én blogom nem ilyen. És szokás szerint a legkevesebb idő-, tudás- és erőforrás-ráfordítás útját követem az oldalamon. Egy módot kínálok arra, hogy növeld...

Nadezsda Trofimova [e-mail védett] Adminisztrátor blog oldala Érdekelhet még:

Eltávolítjuk a kategória bejegyzéseket a főoldalról és az RSS-ről

Továbbra is fejlesztjük az oldal funkcionalitását és megjelenését. Eltávolítjuk a felesleges bejegyzéseket a főoldalról és az RSS-ről.

Morzsa egy WordPress webhelyen

Zsemlemorzsa a webhelyen - mik ezek és hogyan kell csinálni?

Hogyan készítsünk szöveges árnyékot 5 perc alatt

Szia kedves blogom olvasója. Ebből a cikkből megtudhatja, hogyan hozhat létre szöveges árnyékot css stílusok és html kód használatával 5 perc alatt.

Hogyan készítsünk letöltési gombot css kóddal

Szia kedves blogom olvasója. Folytatom a gombok témáját. Ez a cikk arról fog szólni, hogyan készíthet letöltés gombot css kóddal.

Hogyan készítsünk le gombokat egy webhelyhez

A weboldalakon elég gyakran találhatók képek, és nagy méretűek, de a weboldalak kialakítása nem mindig teszi lehetővé, hogy teljes formátumban elhelyezzék őket. Ezért olyan módszert kell kidolgoznunk, amely lehetővé teszi, hogy növeljük őket.

Kezdjük a primitív módszerekkel, és fejezzük be a kép nagyításának legjobb módját.

1. Nagyítsa ki a képet egy link segítségével image-or-smaller-copy-address "/>

Magyarázat például:

• - hogy a link ne helyezzen át súlyt a képre;
• target="_blank" - a kép új lapon nyílik meg.

Az utolsó paraméter nagyon fontos, mivel gyakran a felhasználó tapasztalatlansága miatt a következő helyzet állhat elő: miután megnyitott egy oldalt egy képpel, nem tudja, hogyan térjen vissza, ezért egyszerűen bezárja a lapot, ami azt jelenti, hogy teljesen elhagyja az oldalt. . Az utolsó paraméter megadásával megvédjük őt az ilyen esettől, mert akkor is nyitva lesz a kezdőlap.

Példa a munkára:

A könnyű kezelhetőség ellenére ez a módszer korántsem a legjobb, hiszen a kép nagyításához új oldalt kell nyitni, de ezzel a módszerrel tetszőleges méretű képeket tekinthetünk meg. Tehát levonjuk a következtetést: ha nagyon nagy képeket kell felnagyítani, akkor ez az egyetlen biztos módja annak.

2. A kép automatikus nagyítása a kurzor mozgatásakor

A módszer elnevezése egyértelműen tükrözi a lényegét: ha az egérmutatót a kép fölé viszi, az automatikusan nagyításra kerül. A metódus megvalósítása elemi, de megint nem szeretem ezt a módszert, mert nem lehet egyszerűen mozgatni a kurzort a képen. Végül is mindig növekedni fog - ez bosszantani kezdheti a felhasználót.

A következő kód megvalósítja a lebegtetés automatikus nagyításának lehetőségét:

img.zoom ( kurzor : mutató ; maximális szélesség : 150 képpont ; ) img.zoom:hover ( max - szélesség : nincs ; )

Magyarázatok például:

• img.zoom (max-width: 150px ) - beállítja a kép szélességét a nagyítás előtt;
• img.zoom:hover (max-width: none ) - beállítja a kép szélességét a nagyítás után (a none paraméter azt jelenti, hogy nincs korlátozás a maximális méretre);

3. Kattintson a kép nagyításához

Ez a képek nagyításának legáltalánosabb és legkényelmesebb módja. Ezen kívül számos módszer és megvalósítási lehetőség létezik. Nézzünk néhányat a legnépszerűbb lehetőségek közül:

3.1. Nagyítás aktív fókusz mellett

A képre kattintás után megnagyobbodik, de emiatt a szöveg lefelé mozog, így ez a módszer messze nem a legjobb. Íme egy kódpélda:

.foc ( szélesség : 150 képpont ; kurzor : mutató ; kijelző : inline ; ) .foc: fókusz ( szélesség : auto ; z-index : 100 ; )

Így néz ki az oldalon:

3.2. A kép nagyítása az oldal tetején

Az alábbiakban található a módszer megvalósításához szükséges kód

.blokimg ( pozíció : relatív ; ) .overlay ( kijelző : nincs ; magasság : auto ; bal : -15% ; pozíció : abszolút ; felső : -50% ; szélesség : auto ; z-index : 999 ; ) .overlay .overlay_container ( display : table-cell ; vertical-align : middle ; ) .overlay_container img ( háttérszín : #AB5 ; padding : 10px ; -webkit-border-radius : 5px ; -moz-border-radius : 5px ; ) .overlay :target ( kijelző : táblázat ; ) nagy_kép "/> small_image " id ="imagenM1 " />

Így néz ki az oldalon:

A 3.1 és 3.2 opciók teljes mértékben a CSS képességeken alapulnak, ami azt jelenti, hogy „könnyű” módszerek, mert ne töltse be az oldalt felesleges szkriptekkel. Vannak más lehetőségek is, amelyek szintén CSS-en alapulnak, de ezek egzotikusabbak. Ebben a cikkben nem térek ki rájuk, mert egyes böngészők nem támogatják az ilyen dolgokat.

3.3. Gyönyörű nagyítás

Ez a módszer szerintem a legszebb és legkényelmesebb. A csatlakoztatáshoz egy kicsit trükköznie kell a különféle szkriptek hozzáadásával, ezért annak megvalósításához fontoljuk meg a lépésről lépésre történő telepítést:

Az archívum egy, a képet tartalmazó mappát, két .js és egy .css fájlt tartalmaz majd.

2) Adja hozzá ezeket a fájlokat a webhelyéhez, ahogy az archívumban vannak (azaz az imgs mappának abban a könyvtárban kell lennie, ahol a .js és .css fájlok lesznek).

3) A webhely minden oldalán, ahol a képnagyítást használni fogják, össze kell kapcsolnia a simplebox módszert és stílust:

(function())( var boxes=,els,i,l; if(document.querySelectorAll)( els=document.querySelectorAll("a"); Box.getStyles("simplebox_css","simplebox.css"); Box getScripts("simplebox_js","simplebox.js",function())( simplebox.init(); for(i=0,l=els.length;i a_kisebb_képmásolat_címe ">

jegyzet
A kép egy kisebb példányának címe helyett megadhatja a fő kép címét, ugyanakkor alkalmazhatja a width attribútumot, amelyben megad egy kis szélességet (további információ).

Hogy néz ki az oldalon.

| 18.02.2016

A CSS3 korlátlan lehetőségeket nyit meg a felhasználói felület tervezői számára, és a fő előnye, hogy szinte minden ötlet könnyen megvalósítható és életre kelthető JavaScript használata nélkül.

Elképesztő, hogy egyszerű dolgok milyen élettel töltenek fel egy hétköznapi weboldalt, és könnyebben hozzáférhetővé teszik a felhasználók számára. CSS3 átmenetekről beszélünk, amelyekkel lehetővé teheted, hogy egy elem átalakuljon és stílust váltson, például lebegve. Az alább elérhető kilenc CSS3-animációs példa segít reszponzív hangulatot teremteni webhelyén, valamint javítja az oldal általános megjelenését gyönyörű, sima átmenetekkel.

Részletesebb információkért letöltheti a fájlokat tartalmazó archívumot.

Minden effektus az átmeneti tulajdonság használatával működik. átmenet- „transition”, „transformation”) és a pszeudo-class:hover, amely meghatározza az elem stílusát, amikor az egérmutatót rámutatjuk (oktatóanyagunkban). Példáinkhoz 500x309 képpont méretű divet használtunk, a kezdeti háttérszínt #6d6d6d, és az átmenet időtartama 0,3 másodperc.

Body > div ( szélesség: 500 képpont; magasság: 309 képpont; háttér: #6d6d6d; -webkit-transition: minden 0.3s könnyű; -moz-transition: minden 0.3s könnyű; -o-transition: minden 0.3s könnyű;; átmenet: minden 0,3 másodperccel egyszerű;)

1. Változtassa meg a színt lebegtetéskor

Valamikor egy ilyen hatás megvalósítása meglehetősen fáradságos munka volt, bizonyos RGB-értékek matematikai számításaival. Most elég egy CSS stílust írni, amelyben egy pszeudo-class:hover-t kell hozzáadnia a választóhoz, és be kell állítania egy háttérszínt, amely simán (0,3 másodperc alatt) lecseréli az eredeti háttérszínt, ha a blokk fölé viszi az egérmutatót:

Szín: lebegő ( háttér: #53ea93; )

2. A keret megjelenése

Érdekes és feltűnő átalakítás a belső keret, amely simán megjelenik, amikor az egeret mozgatjuk. Kiválóan alkalmas különféle gombok díszítésére. A hatás eléréséhez a pseudo-class:hover és a box-shadow tulajdonságot használjuk az inset paraméterrel (beállítja az árnyékot az elemen belül). Ezenkívül be kell állítania az árnyékfeszítést (esetünkben 23 képpont) és annak színét:

Szegély:lebegés (box-shadow: inset 0 0 0 23px #53ea93; )

3. Swing

Ez a CSS-animáció kivétel, mert itt nem használjuk az átmeneti tulajdonságot. Ehelyett a következőket használtuk:

• A @keyframes egy kockánkénti CSS-animáció készítésének alapvető direktívája, amely lehetővé teszi az ún. storyboard és írja le az animációt a kulcspontok listájaként;
• animation és animation-itration-count - tulajdonságok az animációs paraméterek (időtartam és sebesség) és a ciklusok számának (ismétlődések) beállításához. Esetünkben ismételje meg az 1.

@-webkit-keyframes swing ( 15% ( -webkit-transform: translateX(9px); transzformáció: translateX(9px); ) 30% ( -webkit-transform: translateX(-9px); transzformáció: translateX(-9px); ) 40% ( -webkit-transzformáció: translateX(6px); transzformáció: translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); transzformáció: translateX(-6px); ) 65% ( -webkit -transform: translateX(3px); transzformáció: translateX(3px); ) 100% ( -webkit-transform: translateX(0); transzformáció: translateX(0); ) ) @keyframes swing ( 15% ( -webkit-transform: translateX(9px); transzformáció: translateX(9px); ) 30% ( -webkit-transform: translateX(-9px); transzformáció: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); transzformáció : translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); transzformáció: translateX(-6px); ) 65% ( -webkit-transform: translateX(3px); transzformáció: translateX(3px); ) 100% ( -webkit-transform: translateX(0); transzformáció: translateX(0); ) ) .swing:hover ( -webkit-animation: swing 0,6s easy; animáció: swing 0,6s könnyű; -webkit-animation-itration-count: 1; animáció-iteráció-szám: 1; ) 4. Csillapítás

A fade hatás lényegében egy elem átlátszóságának egyszerű megváltoztatása. Az animáció két szakaszban készül: először a kezdeti átlátszósági állapotot 1-re kell állítani - azaz teljes átlátszatlanságot, majd az egér lebegtetésekor adja meg az értékét - 0,6:

Fade ( átlátszatlanság: 1; ) .fade:hover ( opacitás: 0,6; )

Az ellenkező eredményhez cserélje fel az értékeket:

5. Nagyítás

Ahhoz, hogy a blokk nagyobb legyen, amikor fölé viszi az egeret, a transzformációs tulajdonságot használjuk, és a scale(1.2) értékre állítjuk. Ebben az esetben a blokk 20 százalékkal nő, miközben megtartja arányait:

Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )

6. Csökkentés

Egy elemet kicsinyíteni ugyanolyan egyszerű, mint nagyobbra tenni. Ha az ötödik pontban a skála növeléséhez 1-nél nagyobb értéket kellett megadnunk, akkor a blokk csökkentéséhez egyszerűen egy olyan értéket adunk meg, amely kisebb lesz egynél, például skála(0,7) . Most, amikor az egeret lebegteti, a blokk arányosan 30 százalékkal csökken az eredeti méretéhez képest:

Shrink:hover ( -webkit-transzformáció: scale(0.7); -ms-transform: scale(0.7); transzformáció: skála(0.7); )

7. Átalakítás körré

Az egyik leggyakrabban használt animáció egy téglalap alakú elem, amely körré alakul, ha fölé viszi az egérmutatót. A CSS border-radius tulajdonságának használatával, amelyet a :hover és az átmeneti paraméterekkel együtt használunk, ez probléma nélkül elérhető:

Kör:lebegés (szegélysugár: 70%; )

8. Forgatás

Egy szórakoztató animációs lehetőség egy elem bizonyos számú fokkal történő elforgatása. Ehhez ismét szükségünk lesz a transzformációs tulajdonságra, de más értékkel - rotateZ(20deg) . Ezekkel a paraméterekkel a blokk 20 fokkal az óramutató járásával megegyező irányban el lesz forgatva a Z tengelyhez képest:

Rotate:hover ( -webkit-transzformáció: forgatásZ(20 fok); -ms-transzformáció: forgatásZ(20 fok); transzformáció: forgatásZ(20 fok); )

9. 3D árnyék

A tervezők véleménye eltér arról, hogy ez a hatás megfelelő-e a lapos kialakításban. Ez a CSS3 animáció azonban meglehetősen eredeti, és weboldalakon is használják. Háromdimenziós hatást érünk el a már ismert box-shadow tulajdonságokkal (többrétegű árnyékot hozunk létre) és transzformációt a translateX(-7px) paraméterrel (biztosítja a blokk vízszintes eltolását balra 7 képponttal ):

Threed:hover ( box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 3px 3px #53ea93, 3px 3px 56p -webkit-transform: translateX( -7px); transzformáció: translateX(-7px); )

Böngésző támogatás

Jelenleg a következő böngészők támogatják az átmeneti tulajdonságot:

Asztali böngészők

internet böngésző	IE 10 és újabb verzió támogatja
Króm	A 26-os verziótól támogatott (amíg a 25-ös verzió nem működik a -webkit- előtaggal)
Firefox	A 16-os verziótól támogatott (a 4-15-ös verziókban a -moz- előtaggal működik)
Opera	12.1-es verziótól támogatott
Szafari	A 6.1-es verziótól támogatott (a 3.1-6 verziókban a -webkit- előtaggal működik)

Az ezekben a példákban használt többi tulajdonságot, mint például a transform , box-shadow stb., szintén szinte minden modern böngésző támogatja. Ha azonban ezeket az ötleteket használja projektjeihez, erősen javasoljuk, hogy ellenőrizze még egyszer a böngészők közötti kompatibilitást.

Reméljük, hogy hasznosnak találta ezeket a CSS3 animációs példákat. Kreatív sikereket kívánunk!