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

2023年8月25日 210次阅读

将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(反之亦然).如果在增长关键帧完成之前应用了缩小关键帧,则它会在变换开始之前将比例“跳转”为0.

您可以在此jsFiddle showing CSS scale transform on mouseover中看到此效果

请注意,如果将鼠标悬停在黑色方块上然后快速鼠标移出,则缩放变换不平滑.

我基本上遵循的是以下内容：

@-webkit-keyframes grow
{
    from { -webkit-transform: CURRENT_SCALE; }
    to { -webkit-transform: scale(1,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解决方案.

点赞