CSS3 Transition Out Custom Animation

0
votes

I have a custom animation in CSS3 which I can transition into view, but I cannot transition it out. Take a look at my Fiddle here: http://jsfiddle.net/spryno724/SW8Ly/. Note that this transition is only working in Webkit browsers as of now.

Try rolling your mouse over the styled text input. The background transitions from white into a blueish color when you roll your mouse over the text field, but it does not transition from blue to white.

I thought the ease-in-out property would take care of this, but it appears only to do so for pre-defined animations.

How can I transition from blue to white on mouse out?

Thank you for your time.

1
csscss-transitionscss-animations

1 Answers

1
votes

Why not use the default (-webkit-)transition method? Doesn't seem you want to do something strange at all. Just look to this jsfiddle: http://jsfiddle.net/savver/SW8Ly/2/

See this for the effects: http://www.css3.info/preview/css3-transitions/ Just scroll down and you'll see what every property does.