CSS 动画生成器

选择预设或自定义 @keyframes，可视化调整动画参数，一键复制 CSS 代码

预设动画库

动画属性

时长（duration）0.5s

延迟（delay）0s

缓动函数（timing-function）

次数（iteration-count）

方向（direction）

填充模式（fill-mode）

@keyframes 编辑器

速度：

元素：背景：

CSS 代码

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animated-fadeIn {
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}