CSS Animation Generator
Create CSS keyframe animations visually. Configure timing, easing, and keyframes with live preview.
%
%
%
@keyframes myAnimation {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.animated-element {
animation-name: myAnimation;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
}
/* Shorthand */
.animated-element-shorthand {
animation: myAnimation 1s ease 0s infinite normal none;
}CSS Keyframe Animations - Technical Details
CSS animations allow you to animate transitions between CSS styles. Use @keyframes to define animation steps, then apply with animation properties: name, duration, timing-function, delay, iteration-count, direction, and fill-mode.
Command-line Alternative
@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n.element {\n animation: fadeIn 0.3s ease-out;\n}