NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar

Člen
Avatar
:8.12.2013 9:08

Zdravím, mám takový problém s animací, kterou jsem si vytvořil v css. Funguje mi bez problému na prohlížeči Chrome a Opera, ale u mozzily a exploreru ne. Prefixy v kódu mám.
Kód:
#animace {
background: url('obrazky/a­nimace2.png') no-repeat center center, url('obrazky/po­zadi1.png');
height: 600px;
animation: animace 6s 0;
-moz-animation: animace 6s 0;
-webkit-animation: animace 6s 0;
-o-animation: animace 6s 0;
}

@keyframes animace {
0% {background: url('obrazky/po­zadi1.png') no-repeat center center, url('obrazky/po­zadi1.png');}
33% {background: url('obrazky/a­nimace1.png') no-repeat center center, url('obrazky/po­zadi1.png');}
66% {background: url('obrazky/po­zadi1.png') no-repeat center center, url('obrazky/po­zadi1.png');}
100% {background: url('obrazky/a­nimace2.png') no-repeat center center, url('obrazky/po­zadi1.png');}
}

@-moz-keyframes animace {
0% {background: url('obrazky/po­zadi1.png') no-repeat center center, url('obrazky/po­zadi1.png');}
33% {background: url('obrazky/a­nimace1.png') no-repeat center center, url('obrazky/po­zadi1.png');}
66% {background: url('obrazky/po­zadi1.png') no-repeat center center, url('obrazky/po­zadi1.png');}
100% {background: url('obrazky/a­nimace2.png') no-repeat center center, url('obrazky/po­zadi1.png');}
}

@-webkit-keyframes animace {
0% {background: url('obrazky/po­zadi1.png') no-repeat center center, url('obrazky/po­zadi1.png');}
33% {background: url('obrazky/a­nimace1.png') no-repeat center center, url('obrazky/po­zadi1.png');}
66% {background: url('obrazky/po­zadi1.png') no-repeat center center, url('obrazky/po­zadi1.png');}
100% {background: url('obrazky/a­nimace2.png') no-repeat center center, url('obrazky/po­zadi1.png');}
}

@-o-keyframes animace {
0% {background: url('obrazky/po­zadi1.png') no-repeat center center, url('obrazky/po­zadi1.png');}
33% {background: url('obrazky/a­nimace1.png') no-repeat center center, url('obrazky/po­zadi1.png');}
66% {background: url('obrazky/po­zadi1.png') no-repeat center center, url('obrazky/po­zadi1.png');}
100% {background: url('obrazky/a­nimace2.png') no-repeat center center, url('obrazky/po­zadi1.png');}
}

 
Odpovědět
8.12.2013 9:08
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na
Honza Bittner:8.12.2013 9:30

A proč tam máš animation: animace 6s 0; ?

Obvykle se to dává ve stylu animation: animace 6s linear; nebo nějaký jiný údaj jak se má animace provést...

Nahoru Odpovědět
8.12.2013 9:30
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar

Člen
Avatar
Odpovídá na Honza Bittner
:8.12.2013 9:37

Tu nulu mám nastavený počet opakování.

 
Nahoru Odpovědět
8.12.2013 9:37
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na
Honza Bittner:8.12.2013 9:43

Aha :)

Zkus zadat k #animace třeba i šířku ....
Jinak by to ale mělo fungovat... Máš aktuální firefox?

Nahoru Odpovědět
8.12.2013 9:43
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar

Člen
Avatar
Odpovídá na Honza Bittner
:8.12.2013 9:49

Mám aktuální a s šířkou jsem to teda zkusil, ale nezabralo to.:/

 
Nahoru Odpovědět
8.12.2013 9:49
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na
Honza Bittner:8.12.2013 9:53

Našel jsem http://stackoverflow.com/…t-in-firefox

Zkus tedy k té 0le dát nějakou jednotku ;)

Nahoru Odpovědět
8.12.2013 9:53
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:8.12.2013 9:57

Btw stačilo dát do googlu jen firefox css3 animation not working ...
A hned první příspěvek byla odpověď, chce se to začít naučit googlit :)

Nahoru Odpovědět
8.12.2013 9:57
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:8.12.2013 10:29

V CSS3 musíš psát všude jednotku, jedinou vyjimkou (kvůli zpětné kompatibilitě) jsou jednotky velikosti a pozice kde se dá psát nula bez jednotky.

 
Nahoru Odpovědět
8.12.2013 10:29
Avatar

Člen
Avatar
Odpovídá na Honza Bittner
:8.12.2013 19:18

Nezabralo. I když jsem tu nulu dal pryč tak pořád nefunguje, chyba asi nebude v ní.

 
Nahoru Odpovědět
8.12.2013 19:18
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.