CSS 动画生成器 - 每日工具 | daystool.com

🎬 CSS 动画生成器

可视化生成 CSS 动画,关键帧编辑和实时预览

快速高效
简单易用
安全隐私

自定义 from/to 变换关键帧。预设动画见 CSS 动画预设; 缓动见 贝塞尔曲线

from → to(px / scale / deg)

使用说明

通过 from/to 的 translate、scale、rotate 生成两帧 @keyframes,并组合 animation 简写;实时预览,参数保存到 localStorage。

  1. 设置动画名称与 timing 参数(duration、easing、iteration、fill-mode)。
  2. 调整 from/to 的 X/Y、缩放与旋转,预览区查看运动轨迹。
  3. 复制生成的 CSS;动画名称在项目中应保持唯一。

数据均在浏览器本地处理,不会上传到服务器。