CSS3 animations variable

Tags:    css3

Hejsa

Jeg er ved at lave en dynamisk CSS3 animation til nogle dynamiske data.
Problemet kommer så i den CSS3 animation der laves, fordi jeg kan bruge :nth-child til at lave en select på hver x element, MEN kan ikke bruge den i data.

Problemet er at jeg ikke gider lave en CSS3 selector klasse til hver.

http://jsfiddle.net/L2xo2e7e/4/

Jeg har jo mulighed for at sætte delay på hver klasse via jQuery, men vil blot høre herinde om det lyder som en god løsning?
Er der en bedre/smartere måde at løse det på?

------------------------------------------------

Har nu lavet løsningen, så den er dynamisk.
Den kan ses her: http://jsfiddle.net/L2xo2e7e/13/

Det lækre i den er at fordi jeg ved hvor mange elementer der er i, så kan jeg tilpasse længden på hele animationen til at passe så det ligner den kører i ring.
0.2 sek pr. kasse x 11 kasser giver 2.2 sekundt, og har så lagt 0.1 oveni (0.2 / 2) for at der bliver mellemrum fra sidste kasse til første starter.
Nu er det så jeg også gerne vil lave den dynamisk, men er jo en CSS selector som ser således ud:
.bumpycontainer:hover .bumpyride-animation
{
-webkit-animation: bumpyride 2.3s ease-out forwards;
}

Er det muligt for mig at sætte animation duration, nu når den er lagt på hover? Så kan den laves ultimativt dynamisk så den passer til uanset hvor mange elementer jeg får.



Indlæg senest redigeret d. 13.04.2015 15:52 af Bruger #17215
7 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 9 karma
Sorter efter stemmer Sorter efter dato
Det hele fik jeg selv løst her: http://jsfiddle.net/L2xo2e7e/16/



Det hele fik jeg selv løst her: http://jsfiddle.net/L2xo2e7e/16/


Super fed animation, :) kan godt li den!



Det hele fik jeg selv løst her: http://jsfiddle.net/L2xo2e7e/16/


Super fed animation, :) kan godt li den!


Tak Jesper, det var også meningen :)
Det fede er at hvis man tilføjer færre eller flere elementer så tilpasser længden af animationen sig til det, så den altid vil begynde forfra når den er slut og ikke risikere at begynde forfra inden den er slut, eller der er forsinkelse og man skal vente længe på den begynder forfra.
Det er det jeg synes er det bedste fordi den passer til 4 kufferter, 13 kufferter, 27 kufferter og tilpasser sig til indholdet :)



Indlæg senest redigeret d. 14.04.2015 06:31 af Bruger #17215
Det hele fik jeg selv løst her: http://jsfiddle.net/L2xo2e7e/16/


Super fed animation, :) kan godt li den!


Tak Jesper, det var også meningen :)
Det fede er at hvis man tilføjer færre eller flere elementer så tilpasser længden af animationen sig til det, så den altid vil begynde forfra når den er slut og ikke risikere at begynde forfra inden den er slut, eller der er forsinkelse og man skal vente længe på den begynder forfra.
Det er det jeg synes er det bedste fordi den passer til 4 kufferter, 13 kufferter, 27 kufferter og tilpasser sig til indholdet :)


Helt enig,



Sweet... !



Må man spørge hvad dan skal bruges til? :P (ren nysgerrighed!)



Må man spørge hvad dan skal bruges til? :P (ren nysgerrighed!)


Hej Christina

Det er til mit cv. Jeg hader at skulle holde sådan et ved lige i et word dokument når der skal skiftes job, og der skal sendes noget til en headhunter, eller hvad det nu kan være. Så mit cv holder sig selv ved lige (i store træk) på min side, og så må det gerne være lidt spændende og ikke bare statisk.
Har lært at ved at have små interaktioner vækker du brugerens nysgerrighed og bibeholder deres interesse længere, så længe det ikke er for meget store bum og bang -typer af ting.



t