Autor | Zpráva | ||
---|---|---|---|
Petr Kopecký Profil |
#1 · Zasláno: 14. 12. 2016, 21:37:00
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> |
||
Časová prodleva: 11 dní
|
|||
Chamurappi Profil |
#2 · Zasláno: 26. 12. 2016, 07:42:47
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é.
|
||
Časová prodleva: 8 let
|
0