ToolsCSS Keyframe Animator
English
S
Loading...
Preparing your workspace
Preparing your workspace
Preparing your workspace
Visually build complex CSS animations and generate the exact code.
@keyframes customAnimation {
0% {
transform: translate(0px, 0px) scale(1) rotate(0deg);
opacity: 1;
}
50% {
transform: translate(100px, -50px) scale(1.2) rotate(180deg);
opacity: 0.8;
}
100% {
transform: translate(0px, 0px) scale(1) rotate(360deg);
opacity: 1;
}
}
.animated-box {
animation: customAnimation 2s ease-in-out infinite;
}