rantanplan2000
Mitglied
Hey,
ich beschäftige mich grad mit css animationen. Jetzt habe ich eine Slider animation gefunden, bei der ich das System noch nicht ganz verstehe.
https://codepen.io/dudleystorey/pen/ehKpi
Das ganze geht mit 5 Bildern ohne Probleme, klar. Jetzt frage ich mich, wie genau die Werte beim Keyframe zustande kommen? Das Prinzip wie es funktioniert ist klar, die Umsetzung nicht ganz.
Wie würde ich sowas z.B. mit 3 statt 5 Bildern machen? Ich schätze die 20%
müssten dann auf 33.33333% gesetzt werden, also eben 100% : Anzahl der Bilder?
Dann gibt es noch:
Müsste ich den Wert dann auf 300% setzen, da 3X100% Bilder?
leider geht es so noch nicht ganz. er slidet dann als ob 5 mal bilder da wären. liegt das am keyframe, da da ein max-wert von 100% { left: -400%; } steht. (müsste dann -200 sein?) mir ist noch nicht ganz klar, wie ich den anpasse. also auch wie die abstände zustande kommen.
aktuell versuche ich es so, aber da stimmt noch was nicht bzw. wie errechne ich die richtigen abstönde der prozente?
Vielen Dank :)
p.s. Wenn ich schon dabei bin, kann man animation: infinite bei hover stopen, oder übersteigt dass dann css only?
ich beschäftige mich grad mit css animationen. Jetzt habe ich eine Slider animation gefunden, bei der ich das System noch nicht ganz verstehe.
https://codepen.io/dudleystorey/pen/ehKpi
Das ganze geht mit 5 Bildern ohne Probleme, klar. Jetzt frage ich mich, wie genau die Werte beim Keyframe zustande kommen? Das Prinzip wie es funktioniert ist klar, die Umsetzung nicht ganz.
Wie würde ich sowas z.B. mit 3 statt 5 Bildern machen? Ich schätze die 20%
Code:
div#slider figure img { width: 20%; .......
müssten dann auf 33.33333% gesetzt werden, also eben 100% : Anzahl der Bilder?
Dann gibt es noch:
Code:
div#slider figure {
position: relative;
width: 500%;
Müsste ich den Wert dann auf 300% setzen, da 3X100% Bilder?
leider geht es so noch nicht ganz. er slidet dann als ob 5 mal bilder da wären. liegt das am keyframe, da da ein max-wert von 100% { left: -400%; } steht. (müsste dann -200 sein?) mir ist noch nicht ganz klar, wie ich den anpasse. also auch wie die abstände zustande kommen.
aktuell versuche ich es so, aber da stimmt noch was nicht bzw. wie errechne ich die richtigen abstönde der prozente?
Code:
@keyframes slidy {
0% { left: 0%; }
30% { left: 0%; }
35% { left: -100%; }
60% { left: -100%; }
65% { left: -200%; }
95% { left: -200%; }
}
Vielen Dank :)
p.s. Wenn ich schon dabei bin, kann man animation: infinite bei hover stopen, oder übersteigt dass dann css only?
Zuletzt bearbeitet: