alexisg_2008
New Member
I'm trying create a simple animation that when a user hovers over an element, another element contained within it fills its parent. Currently, I have a JSFiddle that does just that.BUT, I want to finish this with a few other features that I'm not sure I can actually do in CSS3. [*]I'm trying to find a way to, upon having the inner circle COMPLETELY fill its parent, (ie when its width/height = 300px), I'd like the fill to pause and not disappear after the animation is complete.[*]When a user moves their mouse outside the :hover range, I would like the animation to reverse direction as opposed to abruptly stopping.I've gotten this far with CSS3 but am not sure I can implement these 2 features without resorting to Javascript. Does anyone know of a way of doing this entirely in CSS3/does anyone know if it is possible to do these last two features in CSS3, because I can't seem to find anything.\[code\]JS Fiddle:http://jsfiddle.net/WM2yz/\[/code\]