更有效的方式來放大背景圖片

Question

我目前的代碼來放大背景圖片如下。

.portfolioItem { 
    width: 25vw; 
    height: 25vw; 

    background-size: 100% 100%; 
    background-position: center; 
    overflow: hidden; 

    position: relative; 

    transition: all .4s ease-out; 
} 

.portfolioItem:hover { 
    background-size: 110% 110%; 
} 

我試圖儘可能簡化它，但它仍然滯後很多。

是否有另一種執行此操作的方法，具有較少的滯後/較高的性能？我對JS解決方案持開放態度，但CSS絕對是我心目中最好的工具。

Answer 1

可以使用css transform或css3 transform或animation就這樣

.portfolioItem:hover{ 
-webkit-animation:ex 2s; 
} 

@-webkit-keyframes ex{ 
    0%{transform:scale(1,1);} 
    100%{transform:scale(2,2);} 
}