Keyframe Animations
@keyframes name { 0% {...} 50% {...} 100% {...} } animation ke "checkpoints" define karta hai. animation property (name, duration, timing-function, iteration-count, direction) us keyframe animation ko element par apply karta hai.
Transition vs Animation: transition sirf DO states (start-end) ke beech, usually trigger (hover) ki zaroorat. Animation MULTIPLE steps/loops kar sakta hai, automatically (bina trigger ke) shuru ho sakta hai, infinite repeat kar sakta hai.
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
.bouncing-ball {
animation: bounce 1s ease-in-out infinite;
/* name: bounce, duration: 1s, infinite loop */
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in-element {
animation: fadeIn 0.5s ease forwards;
/* forwards = animation khatam hone ke baad final state maintain karo */
}- @keyframes = multiple checkpoints (0%, 50%, 100%)
- animation property = keyframes ko element par apply karo
- Transition = 2 states, trigger chahiye; Animation = multi-step, auto/loop possible
animation-iteration-count kitni baar animation repeat ho (number, ya infinite). animation-direction control karta hai order — normal, reverse, alternate (forward-backward-forward, ek "ping-pong" effect).
.pulse {
animation: pulse 1s ease-in-out infinite alternate;
/* infinite = kabhi na ruke, alternate = forward-backward-forward... */
}
@keyframes pulse {
from { opacity: 0.5; }
to { opacity: 1; }
}Ek element par MULTIPLE animations ek saath apply kar sakte ho (comma-separated) — jaise ek element jo simultaneously rotate AUR fade kare, alag durations/timings ke saath.
.complex-animation {
animation:
spin 2s linear infinite,
fadeInOut 3s ease-in-out infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes fadeInOut {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}