当前值的纯CSS变换缩放

Question

当前值的纯CSS变换缩放

4

当对一个元素应用CSS缩放变换时，是否可以将“from”值设置为当前缩放比例？

例如，考虑以下两个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（或反之亦然）。如果“shrink”关键帧在“grow”关键帧完成之前被应用，则会导致在变换开始之前将比例“跳”到0的效果。

你可以在这个jsFiddle上看到CSS比例转换mouseover效果请注意，如果你在黑色正方形上移动鼠标然后快速移开鼠标，比例变换就不平滑。

我想要的基本上是像以下这样的东西：

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

- duncanhall

无法仅使用CSS实现（据我所知）。http://css-tricks.com/controlling-css-animations-transitions-javascript/描述了一些通过JavaScript获取当前值的技术，也许您可以进行调整。 - CBroe

这确实是可能的，使用过渡而不是动画。请参见http://jsfiddle.net/G6wME/2/ - 从@enguerranws js fiddle分叉。 - nickspiel

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- enguerranws · Accepted Answer

你的动画使元素在悬停时从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);  
}

在这种情况下，我几乎不建议使用纯CSS解决方案，建议在:hover时使用transition: 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); }
}

这意味着：在动画的50%处，将我的元素（默认缩放比例为100%）以0%的缩放比例进行渲染，然后在100%处恢复。尝试设置诸如current_scale之类的东西是没有意义的。

考虑到这一点，我肯定会选择过渡方案。