Your animation makes the element go from 0% scale to 100% scale on hover, and from 100% to 0% scale on mouseOut.
I think in this case, the solution could be setting the basic scale of the element according to its start point :
#output
{
width: 200px;
height: 200px;
border-radius: 50%;
background: #FF0000;
display: inline-block;
-ms-transform: scale(0,0);
transform: scale(0,0);
-webkit-transform: scale(0,0);
}
In this case, I would harldy recommend using pure CSS solution, using transition on :hover : http://jsfiddle.net/bg6aj/21/
You wont have any "jumping" effect :
#output
{
width: 200px;
height: 200px;
border-radius: 50%;
background: #FF0000;
display: block;
-ms-transform: scale(0,0);
transform: scale(0,0);
-webkit-transform: scale(0,0);
transition: all .2s;
-webkit-transition: all .2s;
}
#touchPad:hover + #output {
-ms-transform: scale(1,1);
transform: scale(1,1);
-webkit-transform: scale(1,1);
}
At this point, you'll have no more jumping effect. Then : can we do something like :
@-webkit-keyframes grow
{
from { -webkit-transform: scale(0,0); }
to { -webkit-transform: scale(1,1); }
}
Answer : quite easy :
@-webkit-keyframes grow
{
0% { -webkit-transform: scale(1,1); }
50% { -webkit-transform: scale(0,0); }
100% { -webkit-transform: scale(1,1); }
}
Which means: take my element (as scale default is 100%), render it with 0% scale at 50% of the animation, and turn it back at 100%. Trying to set something like current_scale doesn't make sense.
Considering that, I'll definitely choose the Transition solution.