动画无法在Chrome上运行

Question

我在div的背景上做了缩放效果。 直到今天它都停止了Chrome的运行。对于其他所有浏览器，它都可以完美运行。

这是我的代码：

.project_image {
    width: 582px;
    height: 280px;
    background-position: center;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    -ms-transition: all .2s linear;
    transition: all .2s linear;
    background-size: 100%;
}

.project_image:hover {
	background-size: 110%;
}

在Chrome上，当我将鼠标悬停在div上时，背景大小会立即设置为110％，而不是按照需要缓慢。

编辑：小提琴https://jsfiddle.net/ca79cohz/

Answer 1

添加此更改，

.project_image {
background-size: 100% 100%;
}
.project_image:hover {
background-size: 110% 110%;
}