请帮我制作比例 css 的动画？

Question

我有一个问题。我是 CSS 动画的新手，无法找出为什么这在 safari 中不起作用。我正在尝试在 img 上制作我的成长动画，它在 chrome 和所有其他浏览器中工作，但在 Safari 中不工作。我是否忘记了一行 css 或其他内容？

img {
    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-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;
}

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

Answer 1

试试这个：

-webkit-transform:scale(0.9, 0.9);

Answer 2

transform: scale(...) in CSS 需要一个数字或一对数字而不是 %.

见MDN

sx A <number> representing the abscissa of the scaling vector.

sy A <number> representing the ordinate of the scaling vector. If not defined, its default value is sx, resulting in a uniform scaling that preserves the element's aspect ratio.

此参考定义了数字的含义 https://developer.mozilla.org/en-US/docs/Web/CSS/number

所以使用 scale(0) 和 scale(1) 而不是 0% 和 100%。

注意：我们不知道您缩放的完整上下文，但您可能需要等待图像加载，具体取决于您的用例。

请帮我制作比例 css 的动画？

Please help me with my scale css animation?

css

animation