Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

Diskuze: Problém s animací

HTML a CSS HTML a CSS Problém s animací American English version English version

Aktivity (1)
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
Redaktor
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
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
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
Redaktor
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
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
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
Redaktor
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
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
Honza Bittner
Redaktor
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
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
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
Nesnáším {}, proto se jim vyhýbám.
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.