もっと効率的な方法で背景画像を拡大する

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

は、あなただけの "遅れ" され、正確には何この

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

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