当前值的纯CSS变换比例

Question

将CSS比例变换应用于元素时，是否可以将“起始”值设置为当前比例？

例如，考虑用于将单独的增长和收缩动画以下2个CSS关键帧转换：

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

这将成功地缩放它施加到元件，但总是从0到1（或副反之亦然）。如果缩减关键帧在增长关键帧已经完成之前获得应用，它具有在转换开始之前将比例“跳跃”到0的效果。

你可以看到在这个jsFiddle showing CSS scale transform on mouseover

注意这个效果，如果你将鼠标放在黑色的正方形，然后迅速鼠标移出，尺度变换并不顺利。

什么，我基本上是后类似如下：

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

Answer 1

动画使该元素从0％比例达到100％，规模上悬停，然后从100％鼠标移开时至0％的规模。

我认为在这种情况下，该解决方案可以根据其起点是设置元素的基本尺度：

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

在这种情况下，我会harldy使用纯CSS解决方案建议使用过渡：悬停：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这样的东西没有任何意义。

考虑到这一点，我一定会选择Transition解决方案。