Hallo zusammen

Ich möchte für diejenigen Browser die CSS3 unterstützen einige kleine hover-Specials einbauen. Das geht auch rel gut soweit,
jedoch ist es so, dass ich bei einem button die Hintergrundfarbe von blau zu einem rot mit pink-stich transformieren lasse.
Leider geht dabei die Animation über ein Violett, was bewirkt dass der Übergang von blau (hell) zu violett (dunkel) zum rot(hell) geht und etwas seltsam aussieht.

Nun wollte ich zusätzlich für diejenigen Browser, dies unterstützen dort den Übergang per keyframe transitions machen.
Geht das, dass ich mit den Keyframe transitions die andere Animation überschreibe?

Code

 
#header li { 
        background-color: #51b3d5; 
	-webkit-transition: all 0.3s ease-in-out;  
	-moz-transition: all 0.3s ease-in-out;  
	-o-transition: all 0.3s ease-in-out;  
	transition: all 0.3s ease-in-out; 
} 
 
#header li:hover { 
        background-color: #e91b5d;  
} 

Damit wird mir die violette Zwischenfarbe gezeigt.

Nun wollte ich so etwas einbauen, doch bis jetzt funktionierts nicht. (Geht das denn überahupt??:)

Hier mal nur für webkit:

Code

@-webkit-keyframes hovering { 
	0% { 
		background: #51b3d5; 
	} 
	 
	50% { 
	  background: #B48492; 
	} 
	 
	100% { 
	  background: #e91b5d; 
	} 
} 

und dann:

Code

#header li:hover { 
        background-color: #e91b5d;  
	-webkit-animation: hovering 1.5s infinite ease-in-out;  
} 

Irgendwie klappt das zwar, aber bei Mouseout etc gibts immer noch Bugs.
Ist das überhaupt sicher, so wie ich das mache, oder ist das zu heikel, um eine schöne Darstellung zu erlangen?

Vielen Dank für Tipps hierzu.

Cheers