CSS图片scale缩放动画在Safari浏览器不生效问题求助

问题根因 #

你当前代码的核心兼容性问题是部分Safari版本不支持scale()函数使用百分比作为入参，仅支持数值格式的参数。另外你当前代码中前缀属性的顺序也可以调整，保证标准属性优先级更高。

修复方案 #

只需要做两处调整即可兼容Safari：

• 把所有scale(0%)替换为scale(0)，scale(100%)替换为scale(1)
• @-webkit-keyframes规则内优先使用-webkit-transform属性，标准@keyframes规则内保留标准transform属性即可

修复后完整代码 #

img {
    -webkit-animation: scale-bubble;
    -webkit-animation-duration: 1.2s;
    -webkit-animation-delay: 1.5s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
    -webkit-transform: scale(0);
    -webkit-animation-play-state: running;
    -webkit-animation-iteration-count: 1;
    
    /* 标准属性放在前缀属性后面，保证现代浏览器优先使用标准实现 */
    animation: scale-bubble;
    animation-duration: 1.2s;
    animation-delay: 1.5s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    transform: scale(0);
    animation-play-state: running;
    animation-iteration-count: 1;
}

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

@keyframes scale-bubble {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

内容的提问来源于stack exchange，提问作者Owen van der Werff