当前值的纯 CSS 变换比例

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 解决方案。