Design @keyframes visually with a live preview, presets, and full timing controls.
Presets
Duration (s)
Delay (s)
Iterations
Timing function
Direction
Fill mode
Loop forever
Percent
X (px)
Y (px)
Scale
Rotate (°)
Opacity
Percent
X (px)
Y (px)
Scale
Rotate (°)
Opacity
Percent
X (px)
Y (px)
Scale
Rotate (°)
Opacity
Live preview
Generated CSS
@keyframes hiveAnim {
0% {
transform: translate(0px, 0px) scale(1) rotate(0deg);
opacity: 1;
}
50% {
transform: translate(0px, 0px) scale(1.15) rotate(0deg);
opacity: 1;
}
100% {
transform: translate(0px, 0px) scale(1) rotate(0deg);
opacity: 1;
}
}
.element {
animation: hiveAnim 1s ease-in-out 0s infinite normal none;
}Apply the rule with animation: hiveAnim 1s ease-in-out 0s infinite normal none;