CSS Keyframe Timeline Builder
Design CSS transition keyframe animations and timelines visually
100% Client-Side
Private & Secure
Configure Properties for 50% Stop
50%
1.3x
180°
50%
60px
-20px
Visual sandbox preview
2.5s
@keyframes custom-pulse-animation {
0% {
transform: translate(0px, 0px) rotate(0deg) scale(1);
background-color: #3b82f6;
border-radius: 8%;
}
50% {
transform: translate(60px, -20px) rotate(180deg) scale(1.3);
background-color: #ef4444;
border-radius: 50%;
}
100% {
transform: translate(0px, 0px) rotate(360deg) scale(1);
background-color: #3b82f6;
border-radius: 8%;
}
}
.animating-box {
animation: custom-pulse-animation 2.5s infinite linear;
}