哪个方面使我的 CSS 转换页面在移动设备上的转换速度变慢？

Question

我已经实施了一个 css 转换来翻译和缩放文本，它在我的计算机上运行流畅但在我的 phone 上运行不流畅（Android 使用 Chrome 浏览器），我想知道为什么。

我已经将我的过渡更改为使用翻译而不是 left/top 进行定位，希望它能提高性能，但它一直很慢（我估计过渡结束时约为 5fps） .因此，我想知道是什么因素使我的动画变慢，是矢量图形，大量缩放，还是在页面转换期间发生的事实（我正在使用 swup），或者别的东西。

代码

我的转变：

transition: transform 1.5s

来自（--big-me-x 大约 50vw，y 大约 50vh）

transform: translateX(-50%) translateX(var(--big-me-x))
           translateY(-50%) translateY(var(--big-me-y))
           scale(0.75);

到

transform: translateX(-50%) translateX(50vw) translateX(-18vh)
           translateY(-75%) translateY(50vh)
           scale(5);

或者看看~~online~~（现在快了！）

Answer 1

动画阴影通常是不鼓励的。您可以改用阴影滤镜，如下面的代码片段所示。

看起来像这样：

#big-me {
  position: absolute;
  left: 0px;
  top: 0px;
  letter-spacing: 0.04em;
  font-size: 27vh;
  line-height: 14vw;
  font-family: 'Playfair Display';
  font-style: italic;
  font-variant: small-caps;
  font-weight: lighter;
  z-index: 1;
  color: red;
  filter: drop-shadow(-0.05vw 0.2vmin 0.4px black);
  opacity: 0.7;
  transform: translateX(-50%) translateX(50vw) translateY(-50%) translateY(50vh)  scale(0.75);
  transition: opacity 0.3s, transform 0.3s, filter 0.3s;
  will-change: transform;
}

#big-me:hover {
  opacity: 1;
  filter: drop-shadow(-0.1vw 0.4vmin 5px black);
  transform: translateX(-50%) translateX(50vw) translateY(-50%) translateY(50vh) scale(0.8);
}

<a href="/me.html" id="big-me" class="transition-enlarge">ME</a>

如果您仍然看到不好的结果，您可以尝试添加 will-change 属性来告诉浏览器该元素将有点动画效果。您可以阅读更多相关信息 here。

哪个方面使我的 CSS 转换页面在移动设备上的转换速度变慢？

Which aspect makes my CSS transform page transition slow on mobile?

css

css-transitions

代码