CSS3 - przesuwane tło w IE

[Caesum]

Mam taki kod:

Kod: [Zaznacz]

/* Duże logo po prawej */
#headlogo2 {
background: url(http://i.imgur.com/nr9dJcU.jpg) repeat center top;
background-size: top;
height: 150px;
border: 1px solid #e4e4e4;
animation: bgscroll 120s infinite linear;
-webkit-animation:bgscroll 120s infinite linear;
-moz-animation:bgscroll 120s infinite linear;
-o-animation:bgscroll 120s infinite linear;
}

@keyframes bgscroll {
    from {background-position:0 0;}
    to {background-position:-2975px 0;}
}
@-webkit-keyframes bgscroll {
    from {background-position:0 0;}
    to {background-position:-2975px 0;}
}
@-moz-keyframes bgscroll {
    from {background-position:0 0;}
    to {background-position:-2975px 0;}
}
@-o-keyframes bgscroll {
    from {background-position:0 0;}
    to {background-position:-2975px 0;}
}
Działa na zasadzie, że bezustannie przesuwa tło w divie w lewo. O ile działa na przeglądarkach typu firefox, chrome, safari, to z jakiegoś powodu nie mogę tego uruchomić na moim Internet Explorer 11.  Pomoże ktoś?

[Xardas47]

Znalazłem coś takiego: 
http://www.markskowrondesign.com/blog/are-your-css3-animations-broken-in-ie10-and-ie11/

[Caesum]

Dalej nic.

[RafalBudzis]

Może form- to zamień na 0% - 100% ? Z IE to zawsze zgadywanie.

Kod: [Zaznacz]

@keyframes bgscroll {
    0% {background-position:0 0;}
    100% {background-position:-2975px 0;}
}

[Caesum]

Już próbowałem, też nie działa. :(

[chicken]

RafalBudzis dał dobre rozwiązanie, ale spróbuj nie zaczynać od wartości zerowej dla background-position.
Nie testowałem

[RafalBudzis]

Już próbowałem, też nie działa. :(

To zrób to po staremu

Kod: [Zaznacz]

<div z overflow hidden>
<div z tłem i szerokością 2 razy większą niz tło></div>
</div>
A potem na JS w "petli" na setTimeOut przesuwasz div`a który jest w środku. I bedzie działać na 100 %

[Caesum]

Nie bardzo się znam na javascript, ale spróbuję, dzięki. Będzie to działać z divem rozszerzającym się na pusty obszar?

O problemach IE z 0 już słyszałem. W moim kodzie występuje zamiast 0 - 0.1

[RafalBudzis]

Będzie to działać z divem rozszerzającym się na pusty obszar?

Jeśli div będzie miał overflow:hidden i ustaloną wysokość i szerokość to będzie obcinał obiekty wewnętrzne.


Chyba o to pytałeś jeśli nie to rozwiń temat.

[Caesum]

Nie pisałem o tym, że ma ustaloną szerokość, napisałem tylko, że chcę, by tło się w nim przesuwało.

Ogólnie chcę, żeby efekt był taki jak tutaj: http://forum.thesims.pl/index.php
Uruchomcie na czymkolwiek innym niż Internet Explorer a zobaczycie o co chodzi.

[RafalBudzis]

Cały kod HTML

Kod: [Zaznacz]

<td id="headlogo2">
<div>

<div style="overflow:hidden; width:auto; height:120px; position:relative;">

<div style="
background: url(http://i.imgur.com/nr9dJcU.jpg) repeat center top;
height: 120px;
width: 6000px;
position: absolute;
top: 0px;
left: -3px;/* TEN ATRYBUT ZMIENIASZ JSem ABY DIV Z TŁEM SIĘ RUSZAŁ */
"> </div>

</div>
</div>
</td>
z Headlogo2 usuń te tło i już będziesz miał statyczne tło
potem w JS zmieniasz tylko zznaczony parametr left