Animate

CSS keyframe animation builder — design, preview, export.

Preview
Timeline
0%
25%
50%
75%
100%
Keyframe at 0%
0%
0.00
0px
30px
0°
1.00
8px
#6366f1
Presets
Entrance
Exit
Emphasis
Settings
CSS Output
@keyframes myAnimation {
  0% {
    opacity: 0.00;
    transform: translateY(30px);
    border-radius: 8px;
    background-color: #6366f1;
  }
  100% {
    opacity: 1.00;
    border-radius: 8px;
    background-color: #6366f1;
  }
}

.myAnimation {
  animation: myAnimation 0.6s ease-out 1 normal forwards;
}

Part of the design toolkit — Palette · Shadow · Ease · Gradient · Animate