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

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转换或css3转换或动画

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

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