Autor Zpráva
Northon
Profil *
Ahoj,

Chtěl bych Vás požádat o radu. Vytvořil jsem animované webové stránky v html5, css3, js a jquery: artichoke.cz/newsad/

Konkrétně mám problém s animací následující části (vůbec neprobíhá animace opacity).
Problém se týká pokud vím Chromu a Opery (pro operu mám css specifické s prefixem -o-).

Animace kouře:
div.kour1-b{
background-image:url(../img/mraky/kour_1.png);
background-repeat:no-repeat;
width:200px;
height:172px;
top:180px;
opacity:0.0;
position:absolute;
right:34px;

/*animation-name*/
-webkit-animation-name:kour1;
 animation-name:kour1;

/*animation-duration*/
-webkit-animation-duration:15s;
animation-duration:15s;
/*animation-delay*/
-webkit-animation-delay:0s;
animation-delay:0s;

/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;

/*animation-direction*/
-webkit-animation-direction:normal;
-webkit-animation-fill-mode:initial;
animation-direction:normal;
animation-fill-mode:initial;

/*animation-timing-function*/
-webkit-animation-timing-function:ease;
animation-timing-function:ease;

}

@-webkit-keyframes kour1{
0% { -webkit-transform: scale(0.0) rotate(60deg); margin-top: 58px; right: 45px; opacity: 0.4 !important;}
100% { -webkit-transform: scale(2.5) rotate(-30deg); right: -140px; margin-top: -360px; opacity: 0.0 !important;}
}
Prohlédnout celé css: http://artichoke.cz/newsad/css/styl.css

Abych vytvořil dojem plynulého kouře, mám tam 12 kouřových obláčků, který se neustále dokola animují.
HTML
<div id="zadni-budovy">
<div id="pinkfloyd-pig"><div id="praseimg"></div></div>
    
<div id="kour">
<div class="kour1-a"></div>
<div class="kour2-a"></div>
<div class="kour3-a"></div>
<div class="kour4-a"></div>
<div class="kour5-a"></div>
<div class="kour6-a"></div>
<div class="kour7-a"></div>
<div class="kour8-a"></div>
<div class="kour9-a"></div>
<div class="kour10-a"></div>
<div class="kour11-a"></div>
<div class="kour12-a"></div>
...atd


Asi před měsícem jsem to zkoušel v Chromu a vše běželo jak má... nicméně teď už kouř není vidět, ale vše ostatní se animuje správně (rotace, měřítko, umístění..). Zajímavé je, že v Safari se to stále zobrazuje správně.

Pro jistotu jsem z css pro #kour1-a zkusil smazat opacity: 0.0 ale nepomohlo to.

Máte nějakou radu čím by to mohlo být? Neměl už jste někdo podobný problém s opacity v chromu?

Děkuji :)

Vaše odpověď

Mohlo by se hodit

Nezapomeňte na odkaz na živou ukázku problému.

Prosím používejte diakritiku a interpunkci.

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