css3背景大小覆盖到动画缩放百分比

Question

我试图用背景大小制作缩放效果。我的问题是，我需要从背景大小：封面到类似背景大小：105%的动画。

当我尝试使用"渐变：0.1s背景大小线性"时，它的动画从0到104%。

不管怎样，我可以在out回到0的情况下，从覆盖到那个百分比进行动画制作吗。

（我使用封面，因为我不知道图像的大小，但我有一个固定大小的div来显示它。）

谢谢Pete

Answer 1

一种可能性是在伪元素中设置背景，然后放大基本元素。（例如，通过转换属性）

.test { 
    width: 300px;
    height: 300px;
    position: relative;
    left: 30px;
    top: 30px;
    transition: all 1s;
}
.test:hover {
    -webkit-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
}
.test:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background: url("http://lorempixel.com/600/400");
    background-size: cover;
}

<div class="test">
  </div>

演示