CSS Animation Generator

Visually generate CSS animation code

预览

预设动画

弹跳按钮

脉冲效果

旋转加载

滑动进入

淡入效果

抖动效果

摇摆效果

翻转效果

放大进入

橡皮筋

果冻效果

参数

动画类型

时长: 1s

延迟: 0s

迭代次数 (0=无限)

缓动函数

方向

CSS 代码

/* CSS 动画代码 */
.animated-element {
  animation: bounce 1s ease 0s infinite normal;
}

/* 关键帧定义 */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
  40%, 43% { transform: translate3d(0,-30px,0); }
  70% { transform: translate3d(0,-15px,0); }
  90% { transform: translate3d(0,-4px,0); }
}