Transitions & Animations
Transitions
Smooth Property Changes
💡 Transition ek smooth gear-shift jaisa hai — bina transition, property change turant "jump" karti hai (jaise light on/off). Transition se change GRADUALLY hota hai, ek smooth animation jaisa, jo eyes ke liye zyada pleasant hai.
transition property (kya animate karna hai), duration (kitni der), timing-function (speed curve — ease, linear, ease-in-out), delay (kab shuru ho) control karti hai. Usually :hover, :focus, ya JavaScript-triggered class changes ke saath use hoti hai.
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: darkblue;
/* Turant nahi badlega — 0.3 second mein SMOOTHLY badlega */
}
.card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
/* Multiple properties, comma se separate */
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}🎬
Transition ek smooth gear-shift jaisa hai — bina transition, property change turant "jump" karti hai (jaise light on/off). Transition se change GRADUALLY hota hai, ek smooth animation jaisa, jo eyes ke liye zyada pleasant hai.
1 / 6
⚡ झट से Recap
- transition-property/duration/timing-function/delay
- :hover/:focus ke saath bahut common combination
- Specific properties list karo, "all" avoid karo (performance)
इस page में (2 subtopics)
Timing function transition ki "speed curve" control karta hai — linear (constant speed, robotic feel), ease (default, slow-start-fast-middle-slow-end, natural feel), ease-in/ease-out (asymmetric), cubic-bezier() (fully custom curve).
.linear { transition: transform 0.3s linear; } /* constant speed */
.ease { transition: transform 0.3s ease; } /* natural, default */
.bouncy { transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
/* custom curve — thoda "overshoot" bounce jaisa effect */Tip: cubic-bezier.com ek popular tool hai visually custom timing curves banane/experiment karne ke liye — copy-paste ready CSS values deta hai.
Har property ka apna alag duration/timing ho sakta hai — comma-separated list mein, har transition independently configure hoti hai.
.card {
transition:
transform 0.2s ease,
box-shadow 0.4s ease,
background-color 0.6s linear;
}
/* Transform fast, shadow medium, color change slow — sab ek saath */Tip: Different timings se subtle, sophisticated "staggered" feel create hota hai — professional design systems mein ye level of detail often noticeable hota hai (though subconsciously).