CSS动画生成器

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

动画基础设置

动画名称

持续时间 2s

延迟时间 0s

缓动函数

动画循环

动画方向

关键帧

X轴位移

Y轴位移

缩放

旋转

透明度

背景色

X轴位移

Y轴位移

缩放

旋转

透明度

背景色

预设动画

预览

动画元素

方形

圆形

三角

时间轴

0%25%50%75%100%

100%

CSS代码

@keyframes myAnimation {
  0% {
    transform: translateX(0px) translateY(0px) scale(1) rotate(0deg);
    opacity: 1;
    background-color: #3b82f6;
  }
  100% {
    transform: translateX(100px) translateY(0px) scale(1.5) rotate(360deg);
    opacity: 0.5;
    background-color: #ef4444;
  }
}

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