CSS Transitions
अपनी wall पर एक light switch click करने की कल्पना करें। room instantly पूरी तरह dark से bright white हो जाता है—कोई middle state नहीं है। यह काम करता है, लेकिन यह थोड़ा jarring महसूस हो सकता है।
अब, एक dimmer switch slide करने की कल्पना करें। light कुछ seconds में dark से bright तक smoothly fade up होती है, एक कहीं ज़्यादा soft, pleasant transition बनाते हुए।
CSS transitions वही dimmer switches हैं। ये browser को instant snap करने के बजाय style changes को समय के साथ smoothly animate करने के लिए कहती हैं (जैसे hover पर किसी button के color को धीरे-धीरे fade करना)।
In this page:
Syntax
selector {
transition: property duration timing-function delay;
}
selector:hover {
property: newValue;
}Transition Properties Declare करना
transition-property property specify करती है कि आप कौन-सी CSS properties animate करना चाहते हैं। आप एक single property specify कर सकते हैं (जैसे background-color) या उस element पर सभी style changes animate करने के लिए all keyword इस्तेमाल कर सकते हैं।
Note:
- complex layouts में all keyword इस्तेमाल करने से बचें, क्योंकि यह browser को अनावश्यक transitions calculate करने पर मजबूर करता है, जो performance धीमी कर सकता है।
- Accepted values:
- transition-property — property name, all (default), या none
- transition-duration — time जैसे 0.3s या 300ms
- transition-timing-function — ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
- transition-delay — transition शुरू होने से पहले का time
- Shorthand order — property duration timing-function delay
Warning:
कुछ CSS properties (जैसे display: none या background-image) को transition या animate नहीं किया जा सकता।
उदाहरण: Declaring Transition Properties
<style>
.box {
background: blue;
transition-property: background-color;
transition-duration: 0.3s;
}
.box:hover {
background: red;
}
</style>
<div class="box">Hover to animate background-color</div>Transition Timing Functions
transition-timing-function property आपके animation की speed curve control करती है, यह define करते हुए कि यह कैसे शुरू, move, और खत्म होता है, ease, linear, ease-in, ease-out, और ease-in-out options देते हुए।
Note:
- animations को तेज़ी से शुरू करने और अंत में धीमा करने के लिए ease-out इस्तेमाल करें, जो users को natural लगता है।
- Accepted values:
- ease — default, धीमी शुरुआत और अंत
- linear — constant speed
- ease-in | ease-out | ease-in-out — acceleration variants
- cubic-bezier(x1, y1, x2, y2) — custom curve
- steps(<n>) — n discrete steps में jumps
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
interface animations के लिए linear curves इस्तेमाल करने से बचें, क्योंकि वे robotic और artificial दिख सकते हैं।
उदाहरण: Transition Timing Functions
<style>
.box {
background: royalblue;
color: white;
padding: 10px;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.box:hover {
transform: translateX(50px);
}
</style>
<div class="box">Starts fast, slows down at the end</div>Transition Delay
transition-delay property animation शुरू होने से पहले wait करने का एक time specify करती है, जिससे आप अपनी animations को pause या sequence कर सकते हैं।
Note:
- अपने page पर कई elements में layered, staggered animations बनाने के लिए transition-delay इस्तेमाल करें।
- Accepted values:
- transition-delay: 0s — default, तुरंत शुरू होता है
- transition-delay: 0.3s — शुरू होने से पहले wait करता है
- transition-delay: 200ms — milliseconds भी काम करते हैं
- transition-delay: -0.2s — negative values बीच में शुरू होती हैं
- comma-separated — हर property के लिए एक delay
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
लंबी transition delays set करना आपकी site को sluggish और user clicks पर unresponsive महसूस करा सकता है।
उदाहरण: Transition Delay
<style>
.box {
background: royalblue;
color: white;
padding: 10px;
transition-property: opacity;
transition-duration: 0.3s;
transition-delay: 0.5s;
}
.box:hover {
opacity: 0.3;
}
</style>
<div class="box">Waits half a second before animating</div>Transition Shorthand इस्तेमाल करना
property, duration, timing, और delay के लिए अलग-अलग lines code लिखने के बजाय, आप transition shorthand property इस्तेमाल करके इन सबको एक single line में लिख सकते हैं, अपनी stylesheets को साफ़ और पढ़ने में आसान रखते हुए।
Note:
- अपनी transition shorthand properties को इस order में लिखें:
- property
- duration
- timing-function
- delay।
- Accepted values:
- transition: <property> <duration> <timing-function> <delay> — shorthand order
- transition: all 0.3s ease — हर property animate करें
- transition: opacity 0.3s, transform 0.5s — कई, comma-separated
- transition: none — transitions disable करता है
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
styling errors रोकने के लिए कई shorthand transitions को commas से अलग करें।
उदाहरण: Using the Transition Shorthand
<style>
.box {
background: blue;
color: white;
padding: 10px;
transition: background-color 0.3s ease-out 0.1s;
}
.box:hover {
background: green;
}
</style>
<div class="box">property, duration, timing, delay in one line</div>Animateable Properties की List
ज़्यादातर layout और visual CSS properties (जैसे colors, sizes, padding, margins, opacity, और transforms) को समय के साथ smoothly transition और animate किया जा सकता है। हालांकि, structural properties जिनकी कोई numeric middle state नहीं होती (जैसे display, font-family, या position) को animate नहीं किया जा सकता।
Note:
- elements को smoothly view से fade out करने के लिए display: none के बजाय opacity property इस्तेमाल करें।
- Accepted values:
- opacity, transform — सस्ते, compositor पर चलते हैं
- color, background-color — animatable colors
- width, height, margin — animatable लेकिन layout trigger करते हैं
- display — default रूप से interpolated (discrete) नहीं है
Warning:
non-animateable properties (जैसे display: none) को transition करने की कोशिश करना elements को आपकी transition settings को bypass करते हुए instantly snap करा देगा।
उदाहरण: Animateable Properties List
<style>
.box {
background: royalblue;
color: white;
padding: 10px;
opacity: 1;
transform: scale(1);
transition: opacity 0.3s, transform 0.3s;
}
.box:hover {
opacity: 0.5;
transform: scale(1.1);
}
</style>
<div class="box">Opacity and transform both animate smoothly</div>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- complex layouts पर भारी all transition keyword इस्तेमाल करना, browser rendering और performance धीमी करते हुए।
- display: none जैसी non-animateable properties को transition करने की कोशिश करना, जिससे elements instantly snap हो जाते हैं।
- अलग lines पर duplicate transition declarations लिखना, जिससे बाद वाले rules combine होने के बजाय पहले वालों को overwrite कर देते हैं।
चैप्टर सारांश
- CSS transitions style changes को instantly snap करने के बजाय समय के साथ smoothly animate करते हैं।
- अपनी transitions को चार properties से configure करें: transition-property, transition-duration, transition-timing-function, और transition-delay।
- इन properties को transition shorthand इस्तेमाल करके एक single line में combine करें, कई property transitions को commas से अलग करते हुए।
ब्राउज़र सपोर्ट
Standard CSS transition properties और timing functions हर modern web browser द्वारा natively supported हैं।
🔒
Chapter Quiz — Complete all 22 topics to unlock
0/22 topics done
Complete these topics first:
- CSS Gradients
- CSS Shadows
- CSS Filters
- CSS Blend Modes
- CSS Transforms
- CSS 2D Transforms
- CSS 3D Transforms
- CSS Transitions
- CSS Animations
- CSS Image Styling
- CSS Image Effects
- CSS Hover Overlays
- CSS Image Modal
- CSS Image Centering
- CSS Image Shapes
- CSS Buttons
- CSS Columns
- CSS Clip Path
- CSS Shapes
- CSS Scroll Snap
- CSS Architecture: BEM
- CSS Custom Properties