[CSS3] pseudoelemente animieren (webkit)

[simonpicos]

Beim rumexperimentieren bin ich auf ein Problem gestoßen.
Ich bastle gerade an einer Breadcrumb-navigation mit css3-Techniken:



Dabei erstelle ich mit den Pseudoelementen :before und :after Dreiecke.
Jeder einzelne Navigationspunkt soll beim hovern animiert werden. (per css-transition) Jedoch weigert sich Chrome die Pseudoelemente zu animieren
Im Firefox läufts soweit ganz normal.

Weiß von euch jemand woran das Problem liegt, oder kennt jemand nen workaround?

Danke für eure Hilfe im Vorraus

//edit

Ich glaube ich habe mich etwas unklar ausgedrückt
Die Pfeile an sich werden animiert, jedoch nicht die Spitze, die ich mit einem Pseudoelement generiert habe. Zur Veranschauliuchung ein Bild:

http://i.imgur.com/9yI6y.jpg

Der rote Bereich wird bei mir im aktuellen Chrome nicht animiert.

//edit2

Die finale Version gibts hier:

 

[spacle]

AW: [CSS3] pseudoelemente animieren (webkit)

Ich habe mich bisschen mit CSS3 beschäftigt, auch mit breadcrump, kann aber in sachen animation nicht viel.
warum ich das jetzt poste? ich surfe mit chrome und bei mir sieht alles super aus, weiss jetzt nicht genau was du meinst.

 

[simonpicos]

AW: [CSS3] pseudoelemente animieren (webkit)

Ich habe mich bisschen mit CSS3 beschäftigt, auch mit breadcrump, kann aber in sachen animation nicht viel.
warum ich das jetzt poste? ich surfe mit chrome und bei mir sieht alles super aus, weiss jetzt nicht genau was du meinst.

Beim hovern verändert sich ja die breite und die hintergrundfarbe. Beides wird animiert. Nur die rechte pfeilspitze springt direkt auf die grüne hintergrundfarbe (ohne Animation)
Mit welcher Version von chrome bist du denn unterwegs?

 

[derkater1]

AW: [CSS3] pseudoelemente animieren (webkit)

Also bei mir sieht die Animation okay aus. Habe Google Chrome 16.0.912.77 auf dem PC. Der rechte Pfeil verhält sich bei mir wie alle anderen Pfeile auch.

 

[Davi2000]

AW: [CSS3] pseudoelemente animieren (webkit)

Ich verwende auch Chrome und bei mir wird die grüne Spitze auch nicht animiert, fällt am meisten auf wenn man zurück hovert.

 

[samtron]

AW: [CSS3] pseudoelemente animieren (webkit)

hallo zusammen
bei mir leuft auch spuer, kein Fehler
MfG

 

[simonpicos]

AW: [CSS3] pseudoelemente animieren (webkit)

Ich glaube ich habe mich etwas unklar ausgedrückt
Die Pfeile an sich werden animiert, jedoch nicht die Spitze, die ich mit einem Pseudoelement generiert habe. Zur Veranschauliuchung ein Bild:

http://i.imgur.com/9yI6y.jpg

Der rote Bereich wird bei mir im aktuellen Chrome nicht animiert.

 

[simonpicos]

AW: [CSS3] pseudoelemente animieren (webkit)

Ich habe mal ein wenig recherchiert und leider rausgefunden, dass Firefox 4+ als einziger Browser die Animation von Pseudoelementen unterstützt.. http://css-tricks.com/transitions-and-animations-on-css-generated-content/
Schade, das ist das erste, was ff hat, webkit aber nciht (zumindest das erste, was wirklich stört)



muss ich wohl auf spans zurückgreifen..

 

[spacle]

AW: [CSS3] pseudoelemente animieren (webkit)

ach das meinst du; ich ging jetzt davon aus das sei gewollt

 

[simonpicos]

AW: [CSS3] pseudoelemente animieren (webkit)

Wens interessiert: Ich habs jetzt für das zweite Dreieck mit nem span gelöst. Anschauen könnt ihrs euch hier: