CSS背景图片更改smouth mouseout

Question

我有以下代码可以切换2个背景图像，并且效果很好。唯一的问题是它无法平稳过渡。 如何控制鼠标移出速度？

.imgswap {
    background-image: url('../img/herogrey.png');
    background-repeat: no-repeat;
    background-size: contain;
    height: auto;
    width: 100%;
    }

.imgswap:hover {
    background-image: url('../img/herocolour.png');
    transition: background 3s;
}