我的设备运行 CSS 转换代码很慢 [关闭]答案

【问题标题】：My Device is Slow on Running CSS Transition Code [closed]我的设备运行 CSS 转换代码很慢 [关闭]
【发布时间】：2021-07-07 03:27:15
【问题描述】：

我正在尝试编写 HTML 代码，但由于某些原因，我的设备无法顺利运行 CSS 代码。你可以查看CodePen写的代码。

html {
  height: 100%;
}

body {
  background: linear-gradient(150deg, rgb(30, 30, 30) 0%, rgb(20, 20, 20) 100%);
}

.parent {
  margin-left: auto;
  margin-right: auto;
  top: 50px;
  width: 230px;
  height: 90px;
  position: relative;
}

#child {
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 0;
  left: 0;
}

.button-frame {
  margin-left: auto;
  margin-right: auto;
  background: none;
  display: inline-block;
  width: 230px;
  height: 90px;
}

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: frame 4s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes frame {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.button {
  margin-left: 5px;
  margin-top: 5px;
  display: inline-block;
  background: none;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background-color: white;
  width: 220px;
  height: 80px;
  animation: butt 3s ease-in-out;
  font-size: 24px;
  animation-fill-mode: forwards;
  transition: 1s;
}

@keyframes butt {
  from {
    margin-top: 30px;
    opacity: 0%;
  }
  to {
    margin-top: 5px;
  }
}

button:hover {
  font-size: 26px;
  text-shadow: 4px 4px 2px #999999;
}

<div class="parent">
  <svg class="button-frame">
    <polygon class="path" points="0,0 200,0 230,30 230,60 230,90 30,90 0,60" style="fill:none;stroke:white;stroke-width:3px"/>
    <text x="" y="" text-anchor="black" fill="white" font-size="">Click here<text>
  </svg>

  <div id="child"><button class="button">Figure More</button></div>
</div>

我已经在其他设备上对其进行了测试，在所有设备上它都很顺利，但在我的设备上的过渡很慢。感觉fps不够。

我曾尝试关闭扩展或在其他浏览器（包括opera、edge和firefox）上尝试，但结果没有改变。另外，我重新激活了“在可用时使用硬件加速，但它没有任何好处。

如果你能帮助我，我将不胜感激。

【问题讨论】：

可以给你一把锤子来敲那个设备，你可以去买另一个
:) 不，这是一个非常好的设备。显卡（Nvidia GTX 950）CPU（核心 i5）和 RAM（16GB DDR3）都很好。奇怪的是这些动画是滞后的。大多数动画和过渡都可以正常工作，但这些却不行。
@Parsa 至少要提到哪个动画滞后！
@Parsa 这样做：codepen.io/manaskhandelwal1/pen/oNBEpEg 看起来是否迟钝！
@ManasKhandelwal 感谢您的回复。您发送的 CodePen 链接没有延迟（最好说它无法检测到），因为它是 0.2 秒，这太快了，但是当我将其增加到 1 秒时，它会变得迟缓。我使用边距或字体大小的过渡和动画是滞后的。当我将持续时间增加到 1 秒时，感觉字体在三帧中变大了。在所有其他设备上都很好，而且非常流畅，但这个设备是唯一有延迟的设备

标签： javascript html css

【解决方案1】：

为什么不使用transform: translateY() 来获得更好的过渡帧率。 translate 在您想要为元素定位设置动画时为您提供平滑过渡。

【讨论】：

您好，感谢您的回复。我试过“变换：缩放和翻译”，它工作得很好而且很流畅。但是，它仍然让我知道是什么导致我的设备出现这种延迟，而它在其他设备上运行良好。另外，如果我知道为什么转换比其他类型的转换（如边距、字体大小等）效果更好，我将不胜感激。（仅链接就完美了）非常感谢
我忘记了为什么 transform 比其他属性更适合平滑过渡动画的确切原因。也许你可以检查一下这个developer.mozilla.org/en-US/docs/Web/Performance/…
抱歉回复晚了。感谢您的帮助和您发送的资源。