css - 哪个方面使我的 CSS 转换页面在移动设备上转换缓慢？

Question

我已经实现了一个 css transition 来翻译和缩放文本，它在我的电脑上运行流畅但在我的手机(Android 和 Chrome 浏览器)上运行不流畅，我想知道为什么。

我已经将我的过渡更改为使用平移而不是左/上定位，希望它能提高性能，但它一直很慢(我估计在过渡结束时约为 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 .