CSS3 Animation sa nezobrazuje vo Firefoxe ale v Chrome ano

Branis

(2 hodnocení)

17. 8. 2012 00:32:43

Zdravim

skusam si vytvorit nieco ako galeriu cisto na baze CSS3.

Vytvoril som nieco ako slider header. Pouzil som animation 0% 20% 40% ...100% a na kazdom iny background-image.

Zvlastnost je ze na chrome ide vsetko ako ma no vo firefoxe sa jednoducho nic nezobrazi.

web:

http://skuska.kvetynet.sk/

Za kazdu radu som vdacny :)

17. 8. 2012 00:32:43

https://webtrh.cz/diskuse/css3-animation-sa-nezobrazuje-vo-firefoxe-ale-v-chrome-ano#reply797364

800XE

(8 hodnocení)

17. 8. 2012 01:16:39

Firefox podle mě animaci background-image zatím nepodporuje.

17. 8. 2012 01:16:39

https://webtrh.cz/diskuse/css3-animation-sa-nezobrazuje-vo-firefoxe-ale-v-chrome-ano#reply797363

(20 hodnocení)

17. 8. 2012 01:37:08

opera ani ie 9 taky nefunguje... proc pouzivas neco co podporuje jen google chrome?

17. 8. 2012 01:37:08

https://webtrh.cz/diskuse/css3-animation-sa-nezobrazuje-vo-firefoxe-ale-v-chrome-ano#reply797362

Branis

(2 hodnocení)

17. 8. 2012 08:02:55

To je znama vec ze IE nepodporuje vela veci z CSS3

Chcel som spravit jednoduchsi slider nech to nemusim riesit cez JS ale vyzera ze budem musiet.

Nenapadlo ma ze to nebude fungovat s obrazkami ked s farbami to funguje bez problemov.

17. 8. 2012 08:02:55

https://webtrh.cz/diskuse/css3-animation-sa-nezobrazuje-vo-firefoxe-ale-v-chrome-ano#reply797361

Ondrej Vertat

(48 hodnocení)

17. 8. 2012 09:06:47

Zase tak "vela" jich není. Bavíme-li se o IE9+. Umí o něco méně věcí, ale propastný rozdíl to není. Před použitím podobných fičur je vždy lepší se ujistit zda to má smysl a mrknout na podporu prohlížečů.

17. 8. 2012 09:06:47

https://webtrh.cz/diskuse/css3-animation-sa-nezobrazuje-vo-firefoxe-ale-v-chrome-ano#reply797360

Branis

(2 hodnocení)

17. 8. 2012 09:16:24

Nebavime sa o IE. Hlavne som to potreboval rozbehat na Firefoxe, chrome a opere.

Btw Ondřej, v tej tabulke sa pise, ze tie "fičury" SU podporovane firefoxom uz dlhu dobu. Nie je tam vsak zmienka o background-image v animaciach ;-)

Na jednom fore sa pisalo, ze s podporou tejto veci sa bude musiet este pockat. Zatial to funguje len v chrome.

Dakujem za odpovede kazdopadne.

17. 8. 2012 09:16:24

https://webtrh.cz/diskuse/css3-animation-sa-nezobrazuje-vo-firefoxe-ale-v-chrome-ano#reply797359

800XE

(8 hodnocení)

17. 8. 2012 10:56:43

Tak použij transition a opacity. To funguje skoro všude a v zaostalých prohlížečích se to prostě obejde bez přechodu. Vystačíš si s deseti řádkama JS:

<!doctype html><html>    <head>        <title></title>        <meta charset="utf-8" />        <style>            #header {                position: relative;                margin: 0 auto;                width: 1000px;                height: 270px;            }            #header img {                position: absolute;                left: 0;                top: 0;                opacity: 0;                transition: opacity 2s ease;                -webkit-transition: opacity 2s ease;                -moz-transition: opacity 2s ease;                -o-transition: opacity 2s ease;                -ms-transition: opacity 2s ease;            }                        #header img.active {                opacity: 1;            }        </style>        <script>            window.onload = function() {                var images = document.getElementById('header').getElementsByTagName('img');                var active = 0;                setInterval(function() {                    active = active < images.length - 1 ? active + 1 : 0;                    for (var id = 0; id < images.length; id++)                        images.setAttribute('class', id == active ? 'active' : '');                }, 3000);            };        </script>    </head>    <body>        <div id="header">            <img src="http://skuska.kvetynet.sk/img/kvetinka1.jpg" alt="" class="active" />            <img src="http://skuska.kvetynet.sk/img/kvetinka2.jpg" alt="" />            <img src="http://skuska.kvetynet.sk/img/kvetinka3.jpg" alt="" />            <img src="http://skuska.kvetynet.sk/img/kvetinka4.jpg" alt="" />            <img src="http://skuska.kvetynet.sk/img/kvetinka5.jpg" alt="" />            <img src="http://skuska.kvetynet.sk/img/kvetinka6.jpg" alt="" />        </div>    </body></html>

17. 8. 2012 10:56:43

https://webtrh.cz/diskuse/css3-animation-sa-nezobrazuje-vo-firefoxe-ale-v-chrome-ano#reply797358

Pro odpověď se přihlašte.

Přihlásit