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

【问题标题】：css3 background-size cover to percentage animation zoomcss3背景大小覆盖到百分比动画缩放
【发布时间】：2016-03-22 01:12:10
【问题描述】：

我正在尝试使用背景大小制作缩放效果。我遇到的问题是我需要从 background-size:cover 设置为 background-size: 105% 之类的动画。

当我尝试使用“过渡：0.1 秒背景大小线性”时，它的动画从 0% 变为 104%。

无论如何我可以从封面动画到那个百分比而不回到 0。

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

谢谢皮特

【问题讨论】：

你能给我们看看你的代码吗，或者提供一个jsfiddle

标签： css css-transitions

【解决方案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>

Demo

【讨论】：

当前浏览器在背景大小的动画之后重新渲染图像，这会在动画时创建低分辨率图像。 transform scale 解决了这个问题。