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

【问题标题】：CSS Transform scale 'glitchy' on firefoxFirefox 上的 CSS 变换比例“故障”
【发布时间】：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

【问题讨论】：

标签： css animation firefox scale

【解决方案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);
    }
  }

【讨论】：