Animate背景大小：缩放到背景大小：110％

Question

我期待CSS动画背景从大小background-size: cover;到background-size: 120%悬停。我不能将背景从100％开始，因为它开始在不同的设备/显示器上垂直重复。但是，在这种情况下，transition:.5s;会停止任何类型的动画。任何解决方法？

代码如下所示：

HTML

<div class="desktop-signs"> 
    <div class="image-box"> 
    <div class="col-md-4 block-service" id="block-illustration"> 
     <h2>ILLUSTRATION &amp; ANIMATION</h2> 
    </div> 
    </div> 
    <div class="image-box"> 
    <div class="col-md-4 block-service" id="block-website"> 
     <h2>WEBSITE DEVELOPMENT</h2> 
    </div> 
    </div> 
    <div class="image-box"> 
    <div class="col-md-4 block-service" id="block-game"> 
     <h2>GAME &amp; APP DEVELOPMENT</h2> 
    </div> 
    </div> 
</div> 

CSS

.__hero-container #services .block-service { 
    height: 800px; 
    background-image: url('../images/blockillustration.jpg'); 
    background-size: cover; 
    text-align: center; 
    color: #fff; 
    background-position: center; 
    opacity: 1; 

    -o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
    transition:.5s; 
} 

.__hero-container #services .block-service:hover { 
    background-size: 110%; 
    opacity: 0.8; 
    cursor: pointer; 
} 

Answer 1

当你意识到你不能从cover动画为任何其他值。

，你可以用假缩放伪元素的效果：

.block-service { 
 
    height: 800px; 
 
    color: #fff; 
 
    opacity: 1; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.block-service:before { 
 
    content: ""; 
 
    background-image: url('http://placehold.it/400x400'); 
 
    background-size: cover; 
 
    background-position: center; 
 
    -o-transition: .5s; 
 
    -ms-transition: .5s; 
 
    -moz-transition: .5s; 
 
    -webkit-transition: .5s; 
 
    transition: all .5s ease; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: -1; 
 
} 
 

 
.block-service:hover:before { 
 
    transform: scale(1.2); 
 
    opacity: 0.8; 
 
    cursor: pointer; 
 
}

<div class="desktop-signs"> 
 
    <div class="image-box"> 
 
    <div class="col-md-4 block-service" id="block-illustration"> 
 
     <h2>ILLUSTRATION &amp; ANIMATION</h2> 
 
    </div> 
 
    </div> 
 
    <div class="image-box"> 
 
    <div class="col-md-4 block-service" id="block-website"> 
 
     <h2>WEBSITE DEVELOPMENT</h2> 
 
    </div> 
 
    </div> 
 
    <div class="image-box"> 
 
    <div class="col-md-4 block-service" id="block-game"> 
 
     <h2>GAME &amp; APP DEVELOPMENT</h2> 
 
    </div> 
 
    </div> 
 
</div>