我读过一些关于如何实现流畅的 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>您可以看到当您将屏幕设为全尺寸时，动画并不流畅。
最佳答案
您可能更愿意考虑转换的 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>关于javascript - CSS 动画不是 60FPS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55004822/