CSS动画生成器

可视化生成CSS动画和关键帧

预设动画

动画配置

动画名称

持续时间

缓动函数

延迟

循环次数

方向

关键帧

预览

生成的CSS

@keyframes myAnimation {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.2);
    opacity: 0.5;
  }
}

.animated-element {
  animation: myAnimation 1s ease 0s 1 normal;
}

使用说明

选择预设动画或自定义关键帧
配置动画属性（时长、缓动等）
实时预览动画效果
一键复制生成的CSS代码

CSS动画生成器

动画配置

关键帧

使用说明

相关工具

CSS压缩美化

SCSS转CSS

SVG优化器

Tailwind生成器

渐变色生成器

CSS Grid生成器