请帮我处理我的缩放 CSS 动画？

Posted 2023-03-06

【中文标题】请帮我处理我的缩放 CSS 动画？

【英文标题】：Please help me with my scale css animation?

【发布时间】：2022-01-04 16:56:07

【问题描述】：

我有一个问题。我是 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%);
    

【参考方案1】：

试试这个：

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

【参考方案2】：

transform: CSS 中的 scale(...) 需要一个数字或一对数字，而不是 %。

见MDN

sx A <number> 代表缩放向量的横坐标。

sy 一个<number> 代表缩放向量的纵坐标。如果不 已定义，其默认值为 sx，导致统一缩放 保留元素的纵横比。

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

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

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

【讨论】：

是的，我尝试使用不透明度来测试问题是否与缩放或只是动画有关...不透明度也不起作用，但我已将数字百分比更改为 0 和 1 而不是0% 和 100% 就完成了！非常感谢！