Question

我偶然发现了一个有趣的错误，其中动画背景大小并不能解释最新版Chrome中的过渡。它似乎在Safari，Firefox和Internet Explorer中运行良好。

background-size: 100%
transition: background-size 0.5s

  &:hover
    background-size: 150%
    transition: background-size 0.5s

Here's a link to a codepen

Answer 1

尝试添加新元素，然后为该元素添加背景 添加溢出：隐藏到父元素
在悬停比例子元素

像

<div class="parent">
  <div class="child">
    </div>
</div>

.child { height:400px;width:200px;background:url....;transition:0.5s}
.parent { overflow:hidden;}
.parent:hover .child { transform:scale(1.5)}

或者您可以使用伪元素，例如：

.parent { overflow:hidden;}
.parent:before { width:100%;height:100%;content:"";position:absolute;top:0;background:url....;transition:0.5s } 
.parent:hover:before { transform:scale(1.5)}

这是一个jsfiddle，第二个解决方案是第一个解决方案也可以。你选择:)

动画背景大小在最新版Chrome中无法正常运行

1 个答案: