NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: keyframe

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
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
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na saeQ
Neaktivní uživatel: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
Neaktivní uživatelský účet
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
Uživatel sítě
Tvůrce
Avatar
Odpovídá na saeQ
Uživatel sítě :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 Uživatel sítě
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
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na saeQ
Neaktivní uživatel: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
Neaktivní uživatelský účet
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
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na saeQ
Neaktivní uživatel: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
Neaktivní uživatelský účet
Avatar
Uživatel sítě
Tvůrce
Avatar
Odpovídá na saeQ
Uživatel sítě :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
Uživatel sítě
Tvůrce
Avatar
Odpovídá na saeQ
Uživatel sítě :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
Uživatel sítě
Tvůrce
Avatar
Odpovídá na saeQ
Uživatel sítě :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
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na saeQ
Neaktivní uživatel: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
Neaktivní uživatelský účet
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.