更有效的缩放背景图像的方法

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);}
}