CSS 动画生成器

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

.animated-element {
  animation: bounce 1s ease 0s infinite normal none;
}

免费在线 CSS 动画生成器

使用实时预览可视化创建 CSS 关键帧动画。自定义持续时间、时间函数、延迟等。从预设动画中选择或构建自定义动画。

提示

• 使用 ease-in-out 获得流畅自然的动画
• UI 交互动画保持在 300ms 以内
• 使用 transform 和 opacity 获得最佳性能
• fill-mode forwards 保持动画结束后的最终状态
• 使用 animation-delay 错开多个动画

常见问题

相关工具