CSS 动画生成器

在线 CSS 动画生成器，支持加载动画、进入动画、悬停动画、强调动画，实时预览并导出 CSS 代码。

动画效果

颜色

大小: 48px

时长: 1s

缓动函数

延迟: 0s

循环次数

方向

实时预览

CSS 代码

.anim-box { width: 48px; height: 48px; }
.anim-target {
  width: 100%; height: 100%;
  border: 4.8px solid rgba(0,0,0,0.1);
  border-left-color: #3b82f6; border-radius: 50%;
  animation: cssanim-spin-a 1s ease-in-out 0s infinite normal;
}
@keyframes cssanim-spin-a { to { transform: rotate(360deg); } }

完整 HTML

<style>
.anim-box { width: 48px; height: 48px; }
.anim-target {
  width: 100%; height: 100%;
  border: 4.8px solid rgba(0,0,0,0.1);
  border-left-color: #3b82f6; border-radius: 50%;
  animation: cssanim-spin-a 1s ease-in-out 0s infinite normal;
}
@keyframes cssanim-spin-a { to { transform: rotate(360deg); } }</style>
<div class="anim-box"><div class="anim-target"></div></div>