Pure CSS conversion scale from current value

Question

When applying 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 individual growing and shrinking animation transformations:

@-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 to which it is applied, but always from 0 to 1 (or vice versa). If the abbreviation keyframe is applied before the keyframe is completed, it has the effect of “jumping” the scale to 0 before starting the conversion.

This effect can be seen in this jsFiddle showing CSS scale conversion on hover

, , , .

, , :

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

Answer 1

0% 100% 100% 0% mouseOut.

, :

#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);  
}

CSS, : hover: http://jsfiddle.net/bg6aj/21/

"" :

#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);
}

. : - :

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

: :

@-webkit-keyframes grow
{
    0% { -webkit-transform: scale(1,1); }
    50% { -webkit-transform: scale(0,0); }
    100% { -webkit-transform: scale(1,1); }
}

: ( 100%), 0% 50% 100%. - current_scale .

, .