| 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: 9 let
|
|||
0