CSS 动画生成

贝塞尔曲线、关键帧动画的可视化编辑器

PREVIEW STAGE

Animation Code

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.animated-element {
  animation: fade-in 1s cubic-bezier(0.4, 0, 0.2, 1) 0s infinite normal none running;
}

动画配置 (Config)

动画预设 (Preset)

时长 (1s)

次数 (infinite)

时间函数 (Timing Function)

小贴士

CSS 动画比 JavaScript 动画具有更好的 CPU 效率。使用 transform 和 opacity 进行动画能获得最佳的 60fps 性能。