Autor Zpráva
Petr Kopecký
Profil
Ahoj,
prosím o radu. Používám CSS animaci pro střídání obrázku na pozadí divu. V chrome a safari to funguje bez potíží, ale explorer a firefox obrázky nezaměňuje. Pokud do kódu @keyframes dám místo "background-image: ..." např. "border: ...." tak to běhá ve všech prohlížečích. Narazil jsem na nepodporu anebo mam něco špatně? Pokud znáte jiné řešení jak plynule měnit obrázky tak mi prosím poraďte.
Celou stránku naleznete na: www.enjoytimber.com/products/products.html

děkuji

css:

.produkty-anim1-div { 
background-image:url("http://www.enjoytimber.com/products/obrazky/birch handle 1.png"); 
background-repeat: no-repeat, no-repeat;  
background-position: top left; 
background-size: contain;
max-width: 700px;
float: left;
clear: none;
margin-left: auto; margin-right: auto; text-align:center;  
animation: produkty-anim1 15s; -moz-animation: produkty-anim1 15s; /* Firefox */ -webkit-animation: produkty-anim1 15s; /* Safari and Chrome */ -o-animation: produkty-anim1 15s; /* Opera */ 
animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -o-animation-iteration-count: infinite;
animation-delay:0s;}

@keyframes produkty-anim1 { 
0% { background-image: url("http://www.enjoytimber.com/products/obrazky/birch handle 1.png"); }
40% { background-image: url("http://www.enjoytimber.com/products/obrazky/birch handle 1.png"); } 
50% { background-image: url("http://www.enjoytimber.com/products/obrazky/birch handle 2.png"); }
90% { background-image: url("http://www.enjoytimber.com/products/obrazky/birch handle 2.png"); }
100% {background-image: url("http://www.enjoytimber.com/products/obrazky/birch handle 1.png"); }
}

html:
<div class="produkty-anim1-div">
  <a href="//www.enjoytimber.com/products/gallery/gallery1/gallery1.html" class="produkty-a" title="click form more pictures">  <span style="font-size:1em; opacity:0.5;" >click to open gallery</span>
      <img src="..//products/obrazky/birch handle 1.png" class="produkty-img">
  </a>
</div>
Chamurappi
Profil
Reaguji na Petra Kopeckého:
V chrome a safari to funguje bez potíží, ale explorer a firefox obrázky nezaměňuje.
To je jen iniciativa webkitů, že podporují animaci na background-image, což by měla být podle specifikace neanimovatelná vlastnost. Nevím, jaké mají ostatní prohlížeče v tomto ohledu plány, nečekal bych zázraky (viz bug u Mozilly).

Chtěl jsem ti tu poradit, abys měnil opacity nějakého druhého bloku, ale koukám, že už to máš přesně takhle vyřešené.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0