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>