| Autor | Zpráva | ||
|---|---|---|---|
| Northon Profil * |
#1 · Zasláno: 19. 8. 2012, 12:11:25
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;}
}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>
...atdAsi 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 :) |
||
|
Časová prodleva: 13 let
|
|||
0