当前值的纯 CSS 变换比例

Posted 2023-03-06

【中文标题】当前值的纯 CSS 变换比例

【英文标题】：Pure CSS transform scale from current value

【发布时间】：2014-04-16 09:49:28

【问题描述】：

当对元素应用 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); 

【问题讨论】：

不可能单独使用 CSS (AFAIK)。 css-tricks.com/… 描述了一些通过 javascript 获取当前值的技术，也许你可以适应它。

这确实可以使用过渡而不是动画。请参阅jsfiddle.net/G6wME/2 - 从下面的@enguerranws js fiddle 分叉。

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

【讨论】：

这似乎根本没有解决解决方案 - 建议的代码将简单地将元素设置为初始 0 比例状态，但不会改变任何实际的转换行为。

如果你使用 CSS 过渡，你不会有任何跳跃效果，这是你的问题的一部分。让我想想另一部分。

你试过类似的东西吗：@-webkit-keyframes grow 0% -webkit-transform: scale(1,1); 50% -webkit-transform: scale(0,0); 100% -webkit-transform: scale(1,1); ? （更新了我的答案）

谢谢，过渡解决方案似乎确实是我们所需要的。您能否展示如何通过 JS 事件而不是 :hover 选择器来应用它？与此类似的东西（不起作用）jsfiddle.net/bg6aj/27

另外，使用建议的 3 阶段关键帧只会产生全尺寸，然后没有尺寸，然后再次全尺寸的效果？