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: keyframe

HTML a CSS HTML a CSS keyframe American English version English version

Aktivity (1)
Avatar
saeQ
Člen
Avatar
saeQ:1.11.2014 18:07

ahoj , snazim sa spravit automaticky slider pomocou css avsak mam problem s keyframe
http://jsfiddle.net/ocdhjvqq/2/

v keyframe mam nadstavene

@-webkit-keyframes slide {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -800px;
 }

}

avsak animacia ide len do -100px a potom sa zastavi , poradi mi dakto ? :D

Editováno 1.11.2014 18:08
 
Odpovědět 1.11.2014 18:07
Avatar
Fredep
Redaktor
Avatar
Odpovídá na saeQ
Fredep:1.11.2014 18:19

Řádek

-webkit-animation: slide 10s  infinite;

který jsi přiřadil selektoru #k by jsi měl přiřadit elementu #two, neboť chceš hýbat s celou skupinou, ne jen s jedním čtverečkem...

Nahoru Odpovědět 1.11.2014 18:19
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
Avatar
saeQ
Člen
Avatar
saeQ:1.11.2014 18:22

ked to pridam do #two tak sa hybe cely div a nie len jeho obsah , ked to pridam do #k tak sa hybe len obsah , avsak animacia sa zastavi pri
margin-left:-100px a nie pri margin-left:-800px;

 
Nahoru Odpovědět 1.11.2014 18:22
Avatar
Marek Z.
Redaktor
Avatar
Odpovídá na saeQ
Marek Z.:1.11.2014 18:29

Ano, protože ty pohneš pouze s #k, ale ostatní selektory protože jsou navzájem obtékání se pohnou taktéž.

Nahoru Odpovědět 1.11.2014 18:29
Chybami se člověk učí, běžte se učit jinam!
Avatar
saeQ
Člen
Avatar
Odpovídá na Marek Z.
saeQ:1.11.2014 18:35

no ved , ale problem je v tom ze sa animacia skonci skorej nez je zadefinovane ,

 
Nahoru Odpovědět 1.11.2014 18:35
Avatar
Fredep
Redaktor
Avatar
Odpovídá na saeQ
Fredep:1.11.2014 19:00

Ona stále pokračuje správně, jen ty to okem nevidíš, neboť pohybuješ pouze elementem k, který po 100px "přejede přes svůj začátek" a ostatní elementy, se kterými nehýbáš ti zůstanou stát na místě..

Zkus je všechny obalit do divu a pohybovat s tím divem, neboť pohybem jednoho elementu těžko rozpohybuješ všechny tak jak by jsi chtěl...

Nahoru Odpovědět 1.11.2014 19:00
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
Avatar
saeQ
Člen
Avatar
saeQ:1.11.2014 19:03

tak potom preco ked sa prvy krat k posunie dozadu o 100px , posunu sa vsetky elementy?

 
Nahoru Odpovědět 1.11.2014 19:03
Avatar
Fredep
Redaktor
Avatar
Odpovídá na saeQ
Fredep:1.11.2014 19:09

To přesně nevím, zřejmě to bude tím, že samovolně se ti elementy nepřesunou před začátek rodičovského elementu.

Nahoru Odpovědět 1.11.2014 19:09
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
Avatar
Marek Z.
Redaktor
Avatar
Odpovídá na saeQ
Marek Z.:1.11.2014 19:11

Protože přikážeš pouze jednomu selektoru jít do mínusu, ostatní se zastaví o hranici šířky selektoru two.

Nahoru Odpovědět 1.11.2014 19:11
Chybami se člověk učí, běžte se učit jinam!
Avatar
saeQ
Člen
Avatar
saeQ:1.11.2014 19:27

http://designshack.net/…photobanner/ robim to podla tohoto kde ma tiez zadefinovanu len jednu animaciu do zaporu a funguje to

 
Nahoru Odpovědět 1.11.2014 19:27
Avatar
Marek Z.
Redaktor
Avatar
Odpovídá na saeQ
Marek Z.:1.11.2014 19:48

Ok na demu příkladu z té stránky to mají na celém elementu ve kterém jsou ty obrázky tudíž:

-webkit-animation: slide 10s  infinite;

přepiš na

-webkit-animation: slide 10s linear infinite;

Dále to smaž z #k a dej to k #two.

A v poslední řadě změň pozici v animaci margin-left: -550px; na více dle počtů elementů v obsahu.
Ber v potaz i okraje elementů 1px na každé straně. Takže si odečti třeba 10 px z pozice do - leva, pokud budeš mít 5, atd.. :)

Akceptované řešení
+20 Zkušeností
Řešení problému
Nahoru Odpovědět 1.11.2014 19:48
Chybami se člověk učí, běžte se učit jinam!
Avatar
saeQ
Člen
Avatar
saeQ:1.11.2014 20:51

Dik , uz to funguje , ale v tom demu maju animaciu na prvom obrazku a nie na celom elemente v ktorom su obrazky

 
Nahoru Odpovědět 1.11.2014 20:51
Avatar
Marek Z.
Redaktor
Avatar
Odpovídá na saeQ
Marek Z.:1.11.2014 21:25

A jo a funguje to myslím si tím, že se navzájem neobtékají.. ;)

Nahoru Odpovědět 1.11.2014 21:25
Chybami se člověk učí, běžte se učit jinam!
Avatar
Fredep
Redaktor
Avatar
Odpovídá na saeQ
Fredep:1.11.2014 22:57

Obdobně jsem ti odpověděl hned na začátku ;)

Nahoru Odpovědět  +1 1.11.2014 22:57
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
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 14 zpráv z 14.