背景尺寸过渡在 chrome 中停止工作答案

【问题标题】：Background size transition stopped working in chrome背景尺寸过渡在 chrome 中停止工作
【发布时间】：2016-10-15 05:51:12
【问题描述】：

我有一个背景尺寸转换，它突然停止在 chrome 中工作，我不知道为什么。如果您将鼠标悬停在此页面上的某个类别框上，您会明白我的意思：

http://demo.elusivethemes.com/luxi/

它以前可以正常工作，但现在停止了。任何想法为什么？

谢谢，

斯科特

【问题讨论】：

这也发生在我身上......它在几周前工作并且最近停止工作。这是问题的代码：codepen.io/ericdjohnson/pen/NrRKRY
这是一个错误：stackoverflow.com/questions/37545089/…

标签： css google-chrome css-transitions

【解决方案1】：

您必须在 .cat-grid 而不是 .cat-grid:hover 中进行转换

webkit-transition: background-size .6s ease;
transition: background-size .6s ease;

【讨论】：

【解决方案2】：

改用变换比例：

.cat-grid {
    background-size: 100%;
    transition: all 1000ms ease;
}

.cat-grid:hover {
    background-size: 104%;
    transform: scale(.6);
}

【讨论】：

这似乎缩放了整个盒子，而不仅仅是背景图片

【解决方案3】：

使用背景位置和背景大小来制作动画：检查这个：https://jsfiddle.net/shriharim/8tcbm6zw/

.thumbnail{
    background-image:url('http://www.quirkybyte.com/wp-content/uploads/2016/02/Green-Nature-Trees-l-730x365.jpg');
    float:left;
    margin:1px;
    width:350px;
    height:350px;
    overflow:hidden;
    background-size:450px 450px;
    background-position:0px 0px;
    background-repeat: no-repeat;
}

.thumbnail:hover {
    background-size:550px 550px;
    background-position:-50px -50px;
    transition:all 0.5s ;
    -webkit-transition:all 0.5s ;
    -o-transition:all 0.5s ;
    -moz-transition:all 0.5s ;
}

【讨论】：

谢谢，问题是图像框是动态的，所以我必须使用百分比。可以用百分比来完成吗？
是的，你可以这样做。将背景大小更改为百分比

【解决方案4】：

我今天遇到了同样的问题。我有background-size: 300px; 和:hover，background-size:325px;。一时兴起，我尝试在背景尺寸中设置高度和宽度，所以background-size: 300px 300px; 和:hover 相同，它成功了！

不确定您将如何处理您的操作方式，背景大小为百分比，但也许这会有所帮助！

更新：这是 Chromium 中的 known bug。

【讨论】：