CSS Animation funktioniert nicht.

[Jan-Frederik Stieler]

Hi,
kann mir jemand sagen was ich bei dieser Animation falsch mache?

http://jsfiddle.net/XDuxG/2/

Die läuft einfach nicht und das ist mein erster Test mit @keyframe.

Viele Grüße

 

[tombe]

Gegenfrage: was soll zu sehen sein wenn man die Seite aufruft?

Im Firefox 21.0 und Opera 12.15 "bewegt" sich zumindest was, nur IE 8 will nicht.

 

[CPoly]

Auch wenn es schon viele sind, hast du noch ein paar prefixes vergessen. Nämlich bei "@keyframes". E.g. "@-webkit-keyframes" etc.

Edit: Beispiel: https://github.com/daneden/animate.css/blob/master/animate.css#L61

 

[Jan-Frederik Stieler]

Hi,
danke CPoly an den fehlenden Vendor-Prefixes lags.
Was ich etwas merkwürdig finde das es erst nach einem Reboot im Firefox funktionierte.

Viele Grüß

 

[CPoly]

Interessant. Denn Firefox unterstützt Animationen schon länger ohne Prefix (hat bei mir auch bei deinem Link geklappt). http://caniuse.com/#feat=css-animation

 

[Jan-Frederik Stieler]

Hi,
ich hatte es im Chrome erstellt und nachdem es dort nicht funktionierte hab ich es im FF ausprobiert.
Dort funktioniert es auch ohne Prefixe, aber eben erst nachdem ich einen Reboot vom FF gemacht hatte.
Wiedermal sowas völlig unnötiges .

Ich hab noch ne Frage. Wenn ich left animiere dann springt die Animation nach 100% wieder auf den Wert von 0% zurück. Wie bekomme ich das dazu bei dem 100% Wert stehen bleibt?

Grüße

 

[CPoly]

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

animation-fill-mode:forwards

 

[Jan-Frederik Stieler]

Hi,
da könnt ihr auch mal schauen was ich gezaubert habe.
http://jsbin.com/owexon/8

Ist zwar noch nicht ganz sauber und hat teilweise nur Webkit Vendor-Prefixe drin.
Falls das jemand verwenden will, gerne. Nur die Postkarte muss dann anders aussehen.

Grüße