Firefox 上的 CSS 变换比例“故障”

Posted 2023-03-06

【中文标题】Firefox 上的 CSS 变换比例“故障”

【英文标题】：CSS Transform scale 'glitchy' on firefox

【发布时间】：2021-08-24 17:45:02

【问题描述】：

我正在尝试使用transform:scale 为一条从中心向两边扩展的线设置动画，但由于某种原因，这条线在到达终点时会稍微“倒回”，但只在这条线的右侧。这似乎只发生在 Firefox 上（在移动设备和桌面上），但在 chrome 上似乎很好。

<div class="line"></div>
<style>
.line 
    height: 4px;
    width: 5px;
    background-color: #5d496a;
    margin: 0 50%;
    animation: line_animation 1s forwards ;

@keyframes line_animation 
    0% 
        transform: scale(1,1);
    
    100%
        transform: scale(22,1);
    
  
</style>

我还在学习动画，所以我不确定我做错了什么。任何帮助将不胜感激。

https://www.w3schools.com/code/tryit.asp?filename=GRA6EYT2GLSX

【参考方案1】：

看起来这是规模大于 1 的问题。

已通过将 width: 5px; 更改为 width: 15%; 并已更改来修复

@keyframes line_animation 
    0% 
        transform: scale(1,1);
    
    100%
        transform: scale(22,1);
    
  

到

@keyframes line_animation 
    from 
        transform: scale(0.01,1);
    
    to
        transform: scale(1,1);