Question

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

例如，考虑以下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（反之亦然）。如果在 grow 关键帧完成之前应用了 shrink 关键帧，则它会在转换开始之前将比例“跳转”为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％缩放，在mouseOut上从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：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％），在动画的50％处以0％比例渲染它，然后将其转回100％。尝试设置类似current_scale的东西是没有意义的。

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

纯CSS转换从当前值开始缩放

1 个答案: