CSS动画构建器

使用时间轴编辑器创建关键帧动画

设置

动画名称

持续时间

延迟

迭代次数

方向

时间函数

填充模式

时间轴

0%25%50%75%100%

关键帧位置 0%

关键帧位置 100%

预设

预览

使用当前设置预览

@keyframes myAnimation {
  0% {
    opacity: 0;
    transform: scale(1) rotate(0deg) translateX(0px) translateY(0px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(360deg) translateX(0px) translateY(0px);
  }
}

.animated-element {
  animation: myAnimation 2s ease infinite both;
}