CSS Animation Timeline Editor - Visual Keyframe Editor

Presets

Timeline

Animation Settings

@keyframes cssTimelineAnim {
  0% {
    opacity: 1;
    background-color: #06b6d4;
  }
  50% {
    transform: translateX(0px) translateY(-30px) scale(1.1);
    opacity: 0.8;
    background-color: #8b5cf6;
  }
  100% {
    opacity: 1;
    background-color: #06b6d4;
  }
}

.element {
  animation: cssTimelineAnim 1s ease infinite normal;
}

Instructions

• • Click on timeline to add keyframes
• • Set properties for each keyframe
• • Configure animation settings
• • Preview and copy the generated CSS