# CSS Animation funktioniert nicht.



## Jan-Frederik Stieler (2. Juli 2013)

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 (2. Juli 2013)

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 (2. Juli 2013)

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 (2. Juli 2013)

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 (2. Juli 2013)

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 (2. Juli 2013)

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 (2. Juli 2013)

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

animation-fill-mode:forwards


----------



## Jan-Frederik Stieler (3. Juli 2013)

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


----------

