Pure CSS transform scale from current value

Question

When applying a CSS scale transform to an element, is it possible to set the 'from' value as the current scale?

For example, consider the following 2 CSS keyframes used to apply separate growing and shrinking animation transforms:

@-webkit-keyframes grow
{
    from { -webkit-transform: scale(0,0); }
    to { -webkit-transform: scale(1,1); }
}

@-webkit-keyframes shrink
{
    from { -webkit-transform: scale(1,1); }
    to { -webkit-transform: scale(0,0); }
}

This will successfully scale the element it's applied to, but always from 0 to 1 (or vice-versa). If the shrink keyframe gets applied before the grow keyframe has finished, it has the effect of 'jumping' the scale to 0 before the transform begins.

You can see this effect in this jsFiddle showing CSS scale transform on mouseover

Notice that if you mouse over the black square and then quickly mouse out, the scale transform is not smooth.

What I'm essentially after is something like the following:

@-webkit-keyframes grow
{
    from { -webkit-transform: CURRENT_SCALE; }
    to { -webkit-transform: scale(1,1); }
}

Answer 1

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.