CSS 动画不是 60FPS答案

【问题标题】：CSS animation not in 60FPSCSS 动画不是 60FPS
【发布时间】：2025-12-05 06:40:02
【问题描述】：

我已经阅读了一些关于如何实现流畅的 CSS 动画的博客，例如 here。

我实际上是在尝试实现类似于下面的红色圆圈比例动画：

但是动画没有我想要的那么流畅。

这是我的Jsfiddle

body,
html {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle .first,
.circle .second {
  width: 2200px;
  height: 2200px;
  position: absolute;
}

.circle .first {
  animation: scale 2s cubic-bezier(0.5, 0.01, 0, 0.08) infinite;
  opacity: 0;
}

.circle .second {
  animation: scale-second 1s cubic-bezier(0.5, 0.01, 0, 0.08) infinite;
  animation-delay: 7s;
  opacity: 0
}

@keyframes scale {
  from {
    transform: scale(0);
    opacity: 1;
  }
  to {
    transform: scale(1.5);
    opacity: 1;
  }
}

@keyframes scale-second {
  from {
    transform: scale(0);
    opacity: 1;
  }
  to {
    transform: scale(1.2);
    opacity: 1;
  }
}

<body>
  <div class="circle">
    <svg class="first" viewBox="0 0 100 100" fill="#ff948d">
      <circle cx="50" cy="50" r="50"></circle>
    </svg>

    <svg class="second" viewBox="0 0 100 100" fill="white">
      <circle cx="50" cy="50" r="50"></circle>
    </svg>
  </div>
</body>

你可以看到全屏时动画不流畅。

【问题讨论】：

您好，您有基本动画的网址吗？
你是指附加的 gif 吗？ @t3__rry
是的，这个。顺便说一句，您可以先将will-change: transform 规则添加到.circle 以使其成为GPU 加速css-tricks.com/almanac/properties/w/will-change

标签： javascript css animation css-animations transform

【解决方案1】：

您可能更愿意考虑转换的 CSS 过渡。由于浏览器不必计算指定关键帧之间的帧，因此它们有可能渲染得更流畅。

其中一个缺点是转换必须由事件触发 - 在这种情况下，在页面加载时，会将“已加载”类添加到每个圆圈中。

document.body.onload = _ =>
  document.querySelectorAll('.circle').forEach(e => {
    e.classList.add('loaded')
  })


// handle the resize for this demo
document.body.onresize = _ => {
  console.log('Demo Resized - Resetting the Transition')
  // remove the class
  document.querySelectorAll('.circle').forEach(e => {
    e.classList.remove('loaded')
  })
  setTimeout(_ => {
    console.log('Transition Start');
    document.body.onload()
  }, 3000)
}

body,
html {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position: absolute;
  transition: transform 1s cubic-bezier(0.5, 0.01, 0, 0.08), opacity 0s;
  -webkit-transition: transform 1s cubic-bezier(0.5, 0.01, 0, 0.08), opacity 0s;
  -moz-transition: transform 1s cubic-bezier(0.5, 0.01, 0, 0.08), opacity 0s;
  -o-transition: transform 1s cubic-bezier(0.5, 0.01, 0, 0.08), opacity 0s;
}

.circle.first {
  background: #ff948d;
}

.circle.second {
  transition-delay: 0.5s;
  background: white;
  opacity: 0;
}

.circle.loaded {
  transform: scale(100);
  -webkit-transform: scale(100);
  -moz-transform: scale(100);
  -o-transform: scale(100);
  -ms-transform: scale(100);
  opacity: 1;
}

<body>
  <div class="circle first"></div>
  <div class="circle second"></div>
</body>

【讨论】：