Day - 23 | CSS Animation | Keyframes, Animation Properties & Live Examples

Name: Day - 23 | CSS Animation | Keyframes, Animation Properties & Live Examples
Uploaded: 2025-12-23T07:23:45+00:00
Duration: 1 h 1 min 2 s
Channel: skillwaala
Description: 👨💻 What You’ll Learn in This Class: ✅ What are CSS Animations and how they work ✅ Creating animations using the @keyframes rule ✅ Important animation properties — animation-name, duration, iteration-count ✅ Difference between transition and animation ✅ Adding multiple animations to one element ✅ Hands-on mini animation project (e.g., bouncing ball, moving box, glowing text)

skillwaala

9 months ago

👨‍💻 What You’ll Learn in This Class:
✅ What are CSS Animations and how they work
✅ Creating animations using the @keyframes rule
✅ Important animation properties — animation-name, duration, iteration-count
✅ Difference between transition and animation
✅ Adding multiple animations to one element
✅ Hands-on mini animation project (e.g., bouncing ball, moving box, glowing text)

Category

📚

Learning

Transcript

Display full video transcript

00:00:00हुआ बहुआ लूगे एवड बार व Von

00:00:24हेलो गाइस गुड इवनिंग एफ्रिवन गुड इवनिंग रवी आदित्या सिबूल कोशल्या अन्मोल रतेश यूजी गेमिंग सूरज यह लियाद हूँ

00:00:38गुड इवनिंग स्वाराओ

00:00:43यूजी गेमिंग कह रहे कि मैंने लगबग error solve कर लिया है

00:00:49एक बार आप चेक कर लिए जिए सर चीक है अभी चेक करते पर इसको

00:00:53स्वारो करेगी सर लास्ट क्लास recording not uploaded यट

00:00:58देखो लास्ट क्लास की recording अपने करी भी नहीं और लास्ट अपनी doubt class हुई थी

00:01:04जो Friday वाली थी तो doubt class में अपने सिर्फ discussion किया था

00:01:08आपसे बातचीत करी थी बस यही था तो उसकी कोई recording नहीं है कुछ नया topic अपके में explore नहीं गया था

00:01:14तो last class की कोई recording नहीं है

00:01:17अगर सब response कर दो कि मेरी voice clear है

00:01:22और screen भी visible है आप सभी को

00:01:38ठीक के ठीक के

00:02:08कि यह पर चेक करूंगा फिर बताओंगा इसमें क्या दिक्कत है

00:02:21चीक है चलो बाई मैंक करें new join मैंक स्वागत है आपका

00:02:34first class के अंदर आपके लिए तो first class ही है

00:02:38अभी अपनी बहुत सारी classes हो चुकी है HTML, CSS

00:02:44अपने CSS complete होने वाला है

00:02:46good evening RST

00:02:54ठीक है चलो अपन अपनी class start करते है

00:03:00discussion शुरू करते है आज वाले class का

00:03:02आज वाले class के topic अपन पढ़ना शुरू करते है

00:03:04workshop project टाइटल टाइटल अपन कह देते है

00:03:20salary और amount अपन यहाँ पर कुछ भी कह देते है

00:03:25यह मैंने amount के दिया

00:03:27मैंने यहाँ फर के दिया यह मेरे पास income है

00:03:29add कर दिया यह यहाँ पर add हो गया

00:03:31बर यह आपने यहाँ अपर अच्छा

00:03:34grab भी बनाए अपने है दो बहुत अच्छी बात है

00:03:35यहाँ पर मैं कह देता हूँ जयसके

00:03:38food करके अपन कह दिते है

00:03:40अमाउंट में आपर कहता हूं ठीक है एक्सपेंस में आपर कहता हूं और मैं इसको अड़ करता हूं तो यह एक्सपेंस यहां पर एड़ हो रहा है ठीक है अच्छा बनाया है लेकिन जब मैं आपर सब डेटा डिलीट कर दू तब यहां पर यह ग्राफ शो ना चीए जैसे अ�

00:04:10जैसे मालो अगर कुछ भी डेटा नहीं है तो condition लगा दो यहाँ पर अगर डेटा नहीं है तो यह ग्राफ नहीं दिखना चीए यह मतलब यह बॉक्स ही नहीं दिखना चीए डेटा आने के बाद दिखे तो यहाँ पर दिखा दो no data added जो भी आपको दिखाना है जो भी आपको �

00:04:40के अपलोड है फेस्बुक पर जाके आप चेक कर सकते हो अपना फेस्बुक अकाउंट लॉगिन करो और फेस्बुक पर जाके आप चेक कर सकते हो वरक्शॉप की complete वीडियो वहीं पर अपलोड है क्योंकि फेस्बुक के उपर ही अपनी वरक्शॉप हुई थी और वरक्श�

00:05:10पर आगे के topics के उपर जहां तक अपने discuss कर लिया था उसी के अंदर अगे discuss करते हैं

00:05:15तो अपने आ जाते हैं अपने folder के उपर मैं यहां पर file then open folder और उसी folder को open कर लेते जिस पर अपन काम कर रहेते

00:05:23इसी के अंदर अपने पास कौन सा folder था अपना css class वाला folder

00:05:28ठीक है तो यहां पर आजाओ इसको उटा दू क्या है यह रहने दो नहीं तो इसको

00:05:45तो आज अपने discuss करेंगे क्या क्या चीज़े अपने discuss कर ली थी css में कुछ और चीज़े remaining रही है तो आज अपने animation पर discuss करते है

00:05:53animation अपने पास यहाँ पर क्या होता है

00:05:56CSS में जो अपने पास animation आता है

00:05:58वो अपन उस पर discuss करते है

00:06:00ठीक है तो CSS में animation पर discuss करते है

00:06:09अब देखो अपने देखा था अपना transition अपने देखा था

00:06:11अपने transform देखा था ठीक है उसमें क्या हो रहा था

00:06:15अगर अपने ट्रांजिशन की बात करते थे तो ट्रांजिशन के से टॉर जब ळाता जब अपन होर करते मतलब मैं करसर लेखिए जा था तब मेरा ट्रांजिशन का यह चीप भी अंगर Say

00:06:29चीज़े देखी थी वो अपन वहाँ पर करवा देते हैं अब यहाँ पर

00:06:33animation क्या होता है देखो अपन animation का एक फाइल बना देता है

00:06:37मैं यहाँ पर करता हूँ animation.sdml और यहाँ पर boilerplate लगा तो

00:06:43अब देखो animation क्या होता है animation भी सेम यह है जैसे मालों

00:06:47आपको किसी element को rotate करवाना है किसी का color change करना है या फिर आपको कुछ भी काम करवाना

00:06:55animation से related जैसे मालों animation अपने देखते हैं आप देखते हो tom एंजरी होता है

00:06:59tom ठीक है और tom की पीछे jerry भाग रहा है या फिर jerry की पीछे tom भाग रहा है

00:07:04यह animation नहीं तो है तो अग्दर अपने को ऐसा animation create करना है तो वह अपन यहाँ पर css animation के दुरू समझेगे कि कैसे अपन create कर सकते है

00:07:14ठीक है तो animation basically यही होता है मतलब बिन जोगा स्ट के use करें अपन यहाँ पर functionality run करवा रहे है वह अपना animation होता है

00:07:23ठीक है तो चलो यहाँ पर अपन देखते है animation क्या होता है अभी जैसे अपने transition देखा था तो transition क्या सबब करता था जैसे मालो मैंने यहाँ पर एक box लिया ठीक है मैंने यहाँ पर एक box बनाया और इस box को अपने style कर लिया ठीक है मैंने screen with screen share कर रखिये सब

00:07:40ठीक है ठीक है ठीक है ठीक है इस box को मैंने यहाँ पर style कर लिए styl कर लेते हैं महीं यहाँ पर WAS

00:08:00लेना और हाइट मैं यहाँ पर कहता हूं 200 पिक्सल रख लेना जब मैं इस बॉक्स के उपर होवर करू तब क्या करना है वो काम भी बता दो मैं कहता हूं

00:08:09मैं होवर करने पर काम आँध्य जैसे म heta कर कर साल लेकर � komme और इस पह बो तो यहां पर अपन होवर कर दे

00:08:26तो जब भी मैं इस पर over करूँगा तो इसकी width क्या हो जाएगी 100% हो जाएगी 200 से

00:08:31अब यह जब मैं over कर रहा हूँ तो मैं transition यहाँ पर लगाना चाहता हूँ

00:08:35मैं क्या चाहता हूँ इसके उपर अपना transition यहाँ पर work करें

00:08:38तो अपन यहाँ पर क्या लगा देंगे अपना transition और transition के अंदर मैं कहा देता हूँ

00:08:42all और कितने second का मैं कहा देता हूँ 3 second का यहाँ पर लगा देना ठीक है

00:08:46तो जैसे मैं इसके उपर cursor लेगे जाऊँगा तो 3 second का transition यहाँ पर होगा

00:08:50तो यह तो अपना transition है जो पर यहाँ पर यूज ले रहे ले लेकिन animation यहाँ पर क्या होता है

00:09:06animation मतलब वो continue आपके run होता हूँ आपको दिखेगा

00:09:10ठीक है उसमें आपको कोई hover ले जाने की जो नहीं है कुछ भी करने की जो नहीं है

00:09:14वो animation आपके पास run होता हूँ दिखेगा परफेक्ट जो run होता हूँ दिखता वैसे

00:09:20छोलो पर यहाँ पर animation मना के देखते कि animation create कैसे करते है

00:09:24अब देखो animation से पहले मैं बतादू animation का syntax क्या होता है

00:09:29पहले अपन syntax समझते है

00:09:30अब syntax के अंदर अपने पास एक तो अपना keyframes होते है

00:09:34और एक अपने पास होता है अपना animation की properties

00:09:38अपन keyframes यहाँ पर set करते है और अपने animation की properties अपन यहाँ पर use करते है

00:09:44कि जिस भी element के उपर आप animation लगाना चाते हूँ

00:09:47उस पर क्या apply करना चाते हूँ

00:09:49क्या क्या properties आप लगाना चाते हूँ

00:09:51मतलब आपका animation कितने second के अंदर run हो

00:09:54from से to run करना चाते हूँ

00:09:56या फिर percentage wise run करना चाते हूँ

00:09:59ठीक है

00:10:00और keyframe क्या होता है

00:10:02keyframe यहाँ पर होता है

00:10:03कि अपन define करते हैं

00:10:05कि अपना animation का pattern क्या रहने वाला है

00:10:07वो अपन keyframe के अंदर decide करते हैं

00:10:10ठीक है

00:10:10define करते है

00:10:11जैसे मालो मैं यहाँ पर आता हूँ

00:10:13और यहाँ पर एक नया box और बनाता हूँ

00:10:15मैंने यहाँ पर एक box 2 बना लिया

00:10:19ठीक है

00:10:19और इस box 2 को मैं यहाँ पर target कर लेता हूँ

00:10:22मैंने बुला box 2

00:10:23और उसको अपने यहाँ पर target करके

00:10:25एक background color मैंने यहाँ पर दे दिया

00:10:27और वो अपन यहाँ पर देते green

00:10:29ठीक है

00:10:30और मैं इसको margin भी दे देता हूँ

00:10:32margin all direction से दे देते 10 pixel की

00:10:35ताकि अपना box सही आए

00:10:36उसके अलावा मैं यहाँ पर इसको width दे देता हूँ

00:10:38200 pixel के अपने width दे दी

00:10:40और यहाँ पर मैं इसको height देता हूँ

00:10:42200 pixel के अपने इसको height दे दी

00:10:44ठीक है

00:10:45तो अपने पास यहाँ पर एक box create होके आएगा

00:10:48ठीक है

00:10:49यह box अपने पास create होके आएगा है

00:10:51अब मेरे को क्या करना है

00:10:52इस box के उपर animation लगाना है

00:10:54मतलब मैं चाहता हूँ

00:10:55कि इसकी जो यह color है

00:10:58background color है

00:10:58यह अपने पास change होना चीए

00:11:00from से to यह change होना चीए

00:11:03या फिर जैसे मालूम मैं चाहता हूँ

00:11:05कि यह यहाँ से यहाँ तक run करना चीए

00:11:09यहाँ से यहाँ तक run करना चीए

00:11:10फिर वापस यहाँ आ जाना चीए

00:11:12फिर रन करना चाहिए, ऐसा कुछ मैं चाहता हूँ, ठीक है, तो देखो, अपन सबसे पहले अपना animation यहाँ पर create करेंगे, मैं यहाँ पर अपना animation बनाता हूँ, तो मैं यहाँ पर लगाँगा, add the red, और यहाँ पर लिखेंगे अपना keyframes, keyframes यहाँ पर क्या होते हैं, कि आप ज

00:11:42name दे दिया, यह keyframe में आप डिसाइड कर रहा हूँ, कि मेरा क्या animation का pattern रहने वाला है, अब यहाँ पर लिखेंगे from, from value देते हैं, दूसरी में यहाँ पर दूँगा 2, मतलब आप animation को from से 2 क्या चलाना चाहते हूँ, ठीक है, मैंने from दिया और 2 दिया, अब from के अंदर मैंने �

00:12:12चला जाए, तब आपका जो transform है, ठीक है, जो transform है, उसके अंदर जो आपने translate x दिया है, उसको value में देते ता हूँ, जैसे 500 pixel, ठीक है, from मैं मैंने बोला कि 0 रखो, लेकिन 2 तक जाते जाते वो 500 pixel उसका transform हो जाना चीए, यह काम मैंने आपर बोला, background color भी मैं यहाँ पर कहता ह�

00:12:42यह सिर्फ आपने अपना keyframe लिखा है, मैंने animation इसके उपर apply नहीं करा, किसी भी box के उपर apply नहीं करा, क्योंकि आपने अगर अपना animation बना लिया, इसका मतलब यह अब move box नाम का एक animation है, keyframe है, जो अपने create कर लिया है, अब यह अपन किसी भी element के उपर इसको apply कर सकते है, जिस

00:13:12animation का name, कि मेरे animation का name क्या है, animation का name अपने क्या रखा, move box, तो वो animation का name मैं आपर pass कर दूए, तो देखो, मैंने animation का name pass करा, मैं refresh करके देखता हूँ, ये कोई animation यहाँ पर work ही नहीं कर रहा, क्योंकि यहाँ पर सिर्फ आपने animation का

00:13:15अब नेम क्या है, animation का नेम इपन ने क्या रखा, move box, तो वो animation का name मैं यहाँ पर

00:13:21pass कर दूँगा, तो देको मैंने animation का name pass करा, मैं refresh करके देखता हूं, यह कोई animation

00:13:26यहाँ पर work ही नहीं कर र CAT, क्यों कि यहाँ पर सिर्फ आपने animation का name

00:13:32दिया है, अब आपको move करवाना है

00:13:34तो उसके लिए आप यहाँ पर

00:13:35animation की duration भी pass करोगे

00:13:38कि कितने duration में, मैंने बुला

00:13:392 second के अंदर, ठीक है

00:13:41तो यह मैंने यहाँ पर इसकी duration पास कर दी

00:13:43तो एको मैं इसको refresh करता हूँ

00:13:45तो देखो 2 second के अंदर वो आपका animation

00:13:47यहाँ पर work करेगा

00:13:48तो यहाँ पर देखो

00:13:51यह जो अपना transition था

00:13:53इस पर मैं cursor लेके जा रहा हूँ

00:13:54तब आपका transition work कर रहा है

00:13:55animation क्या होता है, जब भी आपकी website

00:13:58load होगी, आपका animation work करेगा

00:14:01यहाँ पर आपको

00:14:02cursor नहीं लेके जा रहे, कोई काम नहीं है

00:14:04यह free है बिल्कुल

00:14:05जब भी आपकी website load होगी, जब जो animation आपने लगागा

00:14:08वो यह animation work करेगा

00:14:10जैसे मैंने यह animation लगा

00:14:12इसको जैसे मैं चाहता हूँ कि यह animation

00:14:142 second के अंदर हर बार

00:14:16infinite चलता रहे, चलता ही रहे

00:14:18मतलब इसके iteration count चलते रहे

00:14:21तो मैं यहाँ पर बोलूँगा

00:14:22animation का iteration count

00:14:24यह तीसरी property अपने देखी जिसमें

00:14:26मैं यहाँ पर कहता हूँ infinite

00:14:27infinite मतलब यह animation आपका

00:14:31infinite अब चलता ही रहेगा

00:14:33ठीक है, from से start होगा

00:14:36from की क्या value थी, from मैं अपने

00:14:38translate x रखा जिसको मैं यहाँ पर कह रहा हूँ

00:14:400 पर रखो, और मैंने

00:14:42यहाँ पर 2 के अंदर क्या रखा

00:14:44translate x ही रखा, लेकिन

00:14:46मैंने 500 pixel तक उसको

00:14:48move करा है, x direction के अंदर

00:14:50तो यह अपना animation

00:14:51x direction में work कर रहा है, from से

00:14:54to अपना work कर रहा है, ठीक है

00:14:55तो यह animation अपने create करा

00:14:58सबसे पहले अपन key frame बनाते

00:14:59key frame अब आपने जो बनाये, यह आप

00:15:01किस element पर लगाना चाते हो

00:15:03ठीक है, यह एक key frame है

00:15:05आप यही same animation अगर 4-5

00:15:07element पर लगाना चाते हो, तो सब पर लगा सकते हो

00:15:09ऐसा कुछ ही नहीं कि सिर्फ एक पर लगा सकता हूँ

00:15:11मैं अगर इस box पर भी लगाना चाहूँ

00:15:13तो इस box के उपर भी उस animation को pass कर सकता हूँ

00:15:16जैसे मालों यह box है

00:15:17इसके उपर मैंने बोला animation का name

00:15:19चीक है, और वो मैं यहाँ पर

00:15:21कह देता हूँ, कौन साथ आपने पास

00:15:23move box, वो animation का name

00:15:25मैंने यहाँ पर pass कर दिया, दूसरा मैंने बोला

00:15:27animation की यहाँ पर duration

00:15:29duration मैंने बोल दिया, 4 second की

00:15:32और तीसरा मैंने यहाँ पर

00:15:33बोल दिया, animation का iteration count

00:15:36मैं यहाँ पर बोल रहा हूँ, यह सिर्फ

00:15:37तीन बार ही run होना चीए, यहाँ पर अपर

00:15:39number भी दे सकते है, कि यह सिर्फ

00:15:41तीन बार ही run होना चीए, तो देखो

00:15:43तो अब यहाँ पर क्या होने वाला है मैं refresh करता हूँ एक बार run हुआ आपका first वाला box ठीक है फिर दूसरी बार आपका first वाला box यहाँ पर run हो रहा है और ऐसे ही last तीसरी बार आपका box यहाँ पर run होगा फिर उसके बाद उसका iteration count रूख जाएगा क्योंकि आपने iteration count number में दिया

00:16:13ठीक है तो यह अपने पास अपना animation अपने यहाँ पर create करा जो अपने from से to यहाँ पर लिखा है यहाँ तक की चीज़ समझ में एक है animation की

00:16:23animation के अंदर दू तीन चीज़े पहला अपने keyframe देगा keyframe अपन डिसाइड करते मतलब animation का name क्या रखना है keyframe के अंदर

00:16:31फिर उसके बाद अपन अपनी properties यूज़ करते तीन properties अपने देखी animation का name क्या है animation की यहाँ पर timing क्या है और animation की iteration count क्या रखने है अपने को यह तीन properties अपने यहाँ यूज़ करें

00:16:46अगर हमें इस box को continue move करना हो बगेर refresh किये तो वो कैसे होगा continue तो move हो रहा है refresh कहां कर रहा हूँ यह continue move हो रहा है

00:17:07यह तो refresh इसलिए करके दिखा रहा हूँ जैसे मालव आपने यह website है आपने website को ली जैसे आप website को लोगे तो इसको तो तीन बार यह animation चलेगा क्योंकि आपने iteration count तीन बार लगा रखा है और यह वाला जो है यह continue आपका चलता रहेगा infinite चलता रहेगा जब तक आपने लगा र

00:17:37animation रन कर रखा है तो animation website पर रन रहेगा चीक है यहां तक की चीज के लिए रहे एक बार बताओ यहां तक की चीज के लिए है तो पना आगे बढ़ते है

00:17:52मैं कहा रहे है certificate about course देखो certificate आपको course complete होने के बाद मिलेगा और यह complete course अपना full stack

00:18:08web development का course है जिसमें अपन one stack technology explore कर रहे हैं इसमें अपनी attendance भी mark होती है क्योंकि attendance के basis भी आपको certificate मिलता है

00:18:17attendance कैसे mark करनी है सारी चीजे कैसे करनी है उसके लिए आप इसकी जो first class है इस batch की जो first class है उसको go through करना

00:18:26उसको अच्छे से देखना पूरी class को उसमें मैंने roadmap भी बताया पुरा web development का उस class को अच्छे से देखना आपको automatically पता चल जाएगा कि क्या process रहती है ठीक है बाकी सब चीजे free है आपको certificate पुरा course complete करवाय जाएगा ठीक है

00:18:43जोब assistance मिलेगा resume building classes सब होगा बस आपको अपनी attendance mark करके रखनी है और regular attendance होती है कैसे क्या होता है वो आप first class में जाके check करना

00:18:54अनमोल करे सर animation दुबारा बताना ठीक है यह अपने from से to देखा अब देखो from का मतलब है animation की starting और to का मतलब है animation की ending तीक है यह चीज मैंने यहाँ पर बोली और from से to अपने यहाँ पर चलाया उसको ठीक है

00:19:11अब देखो, जैसे मालो मैं यहां पर आता हूँ, और अपन कोई दूसरा अनिमेशन बनाते हैं, अब देखो यह तो अनिमेशन अपने बना है फ्रॉम से तू, अपन चाहते हैं कि अगर मैं यहां पर पर संटेज वाइस बनाना चाहूँ, तो परसंटेज वाइस कैसे बना ओ�

00:19:41आपर box 3 कह देता हूं और इस box 3 को मैं यहापर target कर लेता हूं मैंने बूला dot box 3 ठीक है box 3 को मैं

00:19:50यहापर target कर लिया इसको एक background color अब भी initially मैं देता हूं green ठीक है एक green यहाँ पर

00:19:56background color देता हूं या फिर कुछ भी देता हूं blue देता है पर थोड़ा सा change और इसको मैं

00:20:00यहां पर width pass कर देता हूं 200 pixel अपने width pass कर दी और यहां पर

00:20:04height pass कर देता हूं 200 pixel मैंने height pass कर दी तो मेरे पास एक box

00:20:09create हो क्या रहा है ठीक है अब यह जो box 3 है इसके उपर में को

00:20:13animation लगाना है color change का ठीक है तो देखो मैं कैसे पर सबसे

00:20:17पहले अपना animation बनाऊंगा मैं लिखोंगा add the rate keyframes ठीक है मैं

00:20:21लिखा add the rate keyframes और मैं यहां पर कह देता हूं color change

00:20:26नाम मैं आपर लिख लेता हूं animation का ठीक है color change नाम मैं

00:20:29ने आपर animation का रख लिया कि यह अपने animation का name रहेगा अब

00:20:34यहां पर आप लगाना चाते हो from से 2 नहीं from से 2 तो यह कि starting value

00:20:39and end value अब मैं चाता हूं कि यहां पर percentage wise में लगाना चाता हूं

00:20:43जैसे मैं चाता हूं कि 0% मतलब initially आपका जो box से वो कैसा दिखे

00:20:48मैं चाता हूं कि जब 25% हो तब आपका box कैसा दिखे

00:20:53मैं चाता हूं कि जब वो यहां पर 75% हो तब वो कैसा दिखे

00:20:58या फिर 50% कह देते हैं percentage कुछ भी ले सकते हो

00:21:02ऐसा कुछी नहीं कि divination 25-25 करो

00:21:06जैसे मालो मैं कह देता हूं कि 80% पर कितना दिखेगा

00:21:09मैं यहाँ पर कह देता हूँ कि जब वो यहाँ पर 100% हो तब वो कैसा दिखेगा

00:21:15तो यह मैंने percentage यहाँ पर रख दिया

00:21:180% initially state होगी 100% उसकी final stage होगी

00:21:22मतलब starting और end value है

00:21:24उसके बीच में आपने percentage भी divide कर दिया

00:21:27कि किस-किस percentage पर क्या काम होगा

00:21:29जैसे मैं बोलता हूँ कि जब वो 0% पर तब उसका background color आप रखो यहाँ पर green

00:21:35जब वो 25% पर आ रहा है तब मैं यहाँ पर कह रहा हूँ कि उसका background color आप red कर देना

00:21:42जब वो 50% पर आ रहा है तब मैं आपर कह रहा हूँ कि उसका background color आप यहाँ पर yellow कर देना

00:21:48और उसके साथ आप यहाँ पर क्या करना उसके उपर border radius भी बना देना और 100% कर देना

00:21:53जब वो 80% पर आ रहा है तब मैं कहे रहा हूं कि आप उसका background color जो है वो आप यहाँ पर blue कर देना

00:22:01ठीक है और बस इतना सा कर देना ठीक है और box shadow भी आप इस पर create कर देना जब वो 80% पर आया और box shadow मैं यहाँ पर कह देता हूं

00:22:158 pixel और 7 pixel और color अपन इस पर कह देते blue पर जैसे green color चीक है मैंने यह कह दिया और जब वो 100% पर आया तब उसका background color आप यहाँ पर कुछ भी करवा लो जैसे brown करवा लो

00:22:30यह animation मैंने यहाँ पर बनाया percentage wise 0% पर क्या होना चीए वो मैंने यहाँ पर बता दिया 25% पर क्या होना चीए वो बता दिया 50% पर क्या होना चीए वो बता दिया 80% पर अपने पास यहाँ पर क्या होना चीए वो बता दिया और 100% पर क्या होना चीए वो भी बता दिया लेकिन

00:23:00बैगराउंड इनिमेशन का नेम कि यहां पर है तो कि यहां पर अप्लाई कर दिया तूसरा अपने पास है उसकी डूरेशन क्या रहने वाली है

00:23:25मतलब 0 से 100% की duration आप क्या देना चाते है उसके उपर

00:23:300% से जो 100% कर रहे हो उसकी complete duration क्या हो

00:23:35तो मैं जैसे कह देता हूँ कि 2 second या फिर 3 second की duration हो

00:23:38ठीक है यह मैंने यहापर कह दिया

00:23:403 second की duration अपने यहापर दे देते हैं

00:23:46उसके अलावा animation का जो iteration count है उसको अभी के लिए मैं infinite कह देता हूँ

00:23:51कि animation का iteration count क्या होना चाहिए infinite होना चाहिए

00:23:54तो देखो यहाँ पर वो animation आपका इस पर apply हो रहा है

00:23:58ठीक है वो animation अपना apply हो रहा है

00:24:01बहुत fast कर रहा है अपने 3 second अपने यहापर कह देते हैं

00:24:04यहाँ अपने यहाँ पर यूज करना चाहते है

00:24:33तो, ठीक है, आप चाहते हो कि अनिमेशन जो है, ठीक है, एनिमेशन जो है, वो वर्क करना चीए कैसे, वो वर्क करना चीए, जब आप करसर लेके जाओ, तब भी करवा सकते हो, करसर ले जाने पर भी अनिमेशन को वर्क करवा सकते हो, जैसे अपना टांजिशन वर्क करता है,

00:25:03यहां तक की चीज क्लियर है तो एक बार बताओ यसर यहां तक की चीज क्लियर है

00:25:33यहां तक की चीज क्लियर है

00:26:03कि यहां तक की चीज के लिए आप सभी को चलो बई आगे चलते हैं और एनिमिशन देखते हैं जैसे मालो मैं चाता हूं

00:26:30लेखो तोड़े और अच्छछ देखते हैं जैसे एनिमिशन की एक ओर क्लास बनाते हैं यहां पर

00:26:39कि मेरे पास यहां पर एक डिव है डिव मतलब बॉक्स ले लो कुछ भी अपन यहां पर कोई

00:26:59एक इमोजी लेते हैं और इमोजी को अपने एनिमेटेट करते हैं जैसे मालो मैं हर्ट का इमोजी ले लेता हूँ यहां पर ठीक है मैंने बुला हर्ट का इमोजी पर यहां पर ले लेंगे और हर्ट का इमोजी ले लो यहां पर है क्या कोई हर्ट का इमोजी यहीं से आके ले �

00:27:29कि यहां पर आएंगे न वह हमझी मालो यह बाला ले लेता हूं में ठीक है यह मैंने यहां पर हट लिए ऐप पने को क्या करना

00:27:47ै इसके उपर एनिमीशल लगाना है चलो वाज यह अनिमिशल लगाते हैं मैं इसको टैरगेट करता हूं मैंने इस टायल

00:27:53करा च्क है मैंने बोला मेरे पास डॉल इसको मैंने आपडोरण हर्ट किया । और अपने इसको विड़्ट और राये दे टा की

00:28:02अपने जो कंटेड्र हो जाए मैं जैसे देता हूं 100 और हाइट में आपर पेड़ता हूं अट्रेट पिक्सल ठीक है

00:28:07और हाइट में आपर कहता हूं 100 पिक्सल चीक है और अपने इसको रन करते एक बार क्या क्या राय देखते एक बार के लिए चीक है तो ये अपने पास ये बनावा आ रहा है वह चोटा आ रहा है सही से टार्गिट नहीं किया कि अपने

00:28:22अच्छा ये तो आयन किसे दिये फोन शाइंज करों उसका शाइज फोन साइज अपन देते हैं और सुपन साइज सिसरे में 40

00:28:35इसको देता हूं कि आप 40-pixel करो इसकी फॉन साइज तो यह 40-pixel हो गया 50-pixel में भी

00:28:40बहुत कम है 100-pixel कर लो एक बार के लिए ठीक है तो यह अपने सिर्स पर फॉन साइज लगा

00:28:49अब देखो इसके उपर मैं animation बनाना चाहता हूं मैं बोला add the red keyframes मतलब आपका दिल धड़कता हुआ दिखना चाहिए तो मैं यहाँ पर कहता हूं heart beat करके पर यहाँ पर कहते हैं

00:29:04अब देखो इस animation को मैं यहाँ पर create करना चाहता हूं तो मैं 0% पर बोल रहा हूं 0% पर क्या करना है वो चीज यहाँ पर लिख दो उसके अलावा आपको 50% पर क्या करना है वो लिख दो परसंटेज कैसे भी लिख सकते हैं कोई fix नहीं 0% 50% ऐसा है लिखो जितना आपको divide करना ह

00:29:34अपने प्रॉपर्टी देखी थी एक वैल्यू देखी थी ठीक है और वह वैल्यू क्या थी अपने पास scale

00:29:40scale क्या काम आती है जूम इन जूम आउट करने के लिए तो मैं चाहता हूं कि यह animation जूम हो गया है

00:29:450 पे तो वो initially जैसा है वैसा ही दिखे तो मैं यहाँ पर कहता हूं कि scale जो है वो कितना रहे 1 रहे

00:29:51यह उती है maximum value फिर उसके बाद मैं कहा रहा हूं इसी के उपर transform लगाके और scale अपन यहाँ पर कह देते हैं

00:29:59और उसमें मैं कह देता हूं कि 1.5 यह हो जाना चाहिए और 100% पर मैं क्या कह देता हूं 100% मैं यहाँ पर कहता हूं

00:30:06transform और scale की value अपन कह देते हैं वापस 1 हो जाना चाहिए मतलब 50% पर यहाँ पर 1.5 हो जाना चाहिए यह काम अपन यहाँ पर कर रहे हैं

00:30:16यह animation का name मैं हाँ पर देता हूं मैंने बुला animation name और animation का name अपने पास क्या है जो आपने name दिया है वो ही pass कर दो यहाँ पर same होना चाहिए

00:30:24तो मैं आज़ा copy कर लेता हूं और इसको यहाँ पर pass कर देता हूं फिर उसके बाद second अगर अपन बात करें animation की duration तो duration जैसे मैं यहाँ पर देता हूं 1 second की और यहाँ पर आपन देते है animation का iteration count और इसको अपन यहाँ पर करते है infinite ठीक है यह काम मैंने हाँ पर करा इसके उपर �

00:30:54तो वह अपने पास लग रहा है कि यह हर्ट बीट ऐसे लग रहा है कि हाँ है यह कुछ हो रहा है कि कुछ कुछ तो हो रहा है

00:31:05ठीक है

00:31:10कि अ

00:31:15कि

00:31:24कि अगरें यहां तक की चीछ

00:31:30कि यहां तक की चीछ कि लिए रहा है कि कुछ अगरा एनिमिशन में यहां फिर बस ऐसे उपर से जारी चीज़ें

00:31:54कि यहां फिर समझ में भी आ रहा है

00:31:56ठीक है ऐसे देखो पन स्पीनर बनाते है अपना

00:32:21स्पीनर अगर आपने देखा हो जैसे अपन यहां पर आते है और स्पीनर अपन यहां पर सर्च करते है अपना स्पीनर कैसे होता है

00:32:29यहां पर एक डिव लेता हूं उसको अपन यहां पर कहते है

00:32:58इसको मैं आपर टार्गेट कर लेता हूं जिसको मैं आपर क्या बोला है जिस डिव को मैं आपर टार्गेट कर लेता हूं तो मैं आपर कहता हूं तो मैं आपर कहता हूं ठीक है यही दिए अपने स्पीनर ठीक है अब यहां पर मैं इसको विट पास करता हूं विट अपने पास

00:33:28अपन यहां पर इसको दे देते हैं ठीक है यह हाइट रही नीच है इसके उपर बॉर्डर भी बनानी पड़ेगी क्योंकि बॉर्डर ही तो अपने को दिखे कि चलते वह तो बॉर्डर बना देता हूं और बॉर्डर को मैं आप कहता हूं कि आप 5 पिक्सल की बनाओ

00:33:38solid बनाओ और black color की बनाद हो गयरा ठीक है black color की यहाँ पर एक बॉर्डर आप इस पर create करते हूं perfect इतना चा काम अपने यहाँ पर करा ठीक है उसके अलावा मैं यहाँ पर और क्या करूँँ हा इसको border radius भी देता हूं मैंने border radius बोला और मैंने बॉल दिया 100% कर देना ठीक है देख

00:34:08कि यह spacing कर लेता है पनथ विटी सी मैं रहा है और और 50 Micheal की मार verdi हुआ तो कि आ

00:34:20पस यहां पर क्रिए औरश्कों भी 50-Pixels-C September मांसे देपा हुआ तो यह अपने पास अपना

00:34:33अब देखो यह जू था अपने पास इस तरीके से था

00:34:38था, एक काम करते हैं पर इस पर border radius एक बार के लिए मैं remove करता हूँ, ठीक है, border radius मैंने remove कर दिया, अब मैं को spinner बनाना है, मेरा background color क्या है, white है, तो मैं एक काम करता हूँ, कि इसकी जो top की border है, वो मैं यहाँ पर white कर देता हूँ, मैं बोलता हूँ border, top जो है, वो अब 5 pixel की रखो,

00:35:08border radius एक बार वापस आप इस पर लगा दो, तो तो कोई कुछ इस तरीके से अपने पास बन के आ गया, अब अपने को क्या करना है, बस इसको rotate करवाना है, तो rotate करवाना है, तो rotate के लिए तो animation है आपके पास, तो आप यहाँ पर अपना animation create कर लो, आप बोलोगे add the red keyframes, ठीक है,

00:35:38from को कैसे target करोगे, from को आप करोगे transform property की दुरू, और transform में अपने rotate function बढ़ा था, जिसमें मैं initially 0 degree पर ही रख रहा हूँ, लेकिन जब वो 2 तक जा रहा है, तब मैं यहाँ पर बोला हूँ कि transform को आप यहाँ पर क्या कर देना, rotate कर देना, और rotate कितना कर देना, 360 degree rotate कर देना भा�

00:36:08नेम अपने पास क्या है, spin है अपने पास, फिर उसके बाद animation की duration पास कर दो कि कितना fast होना चाहिए, जैसे अभी के लिए 2 second रपन रख लेता है, फिर check कर लेंगे क्या हो रहा है, और उसके अलावा है मैं यहाँ पर animation का iteration count भी यहाँ पर पास करता हूँ, और infinite कर देता हूँ

00:36:38वह पड़ा ऐसे smooth लग रहा था, यह ऐसे लग रहा है lag हो रहा है एक जगह पर ठीक है, रुक रहा है गहीं पर, यह क्यों हो रहा है यह न क्यों हो रहा है यहाँ पर पर पास के लिए और यह परτοपर्य यह हो रहा है वह अपने को देखने पड़ेगी यह automatically smooth हो जााए George

00:36:53चीक है जैसे मैं इसकी थोड़ी सी duration कम कर देता हूँ मैं यहाँ पर इसको एक सेकिन ही कह देता हूँ

00:37:02duration अपन एक सेकिन कह देते हैं यहाँ पर

00:37:12फाइल सेव करो और चेक करो तो देखो यह कुछ इस तरीके से अपने को दिखाई दे रहा है यह ऐसा लग रहा है कि अपने पास run ओ रहा है इस तरीके से तो spinner जो था वैसा ही है

00:37:25अब यह थोड़ा सा लेगी लेगी लग रहा है क्यों है यह मैं बताऊँ आगे इसमें एक property अपने को और लगानी पड़ेगी वह property अपने एक्स्प्लोर करेंगे तब मैं ज़रूर बताऊँ है कि यह जिस तरीके से वर्ग करेगा फिर

00:37:38चीक है जैसे मालोपन और animation और भी बहुत सारी चीज़े जैसे मालोपन ने यहाप पर कोई 1H1 टैग लिया उसके अंदर पर लिख जेते है देवान शू सर

00:37:58ठीक है यह खुद आप दिमाग लगाओगे जितने भी transform property उसके तुरू आप कुछ भी कर सकते है animation में बस खुद से दिमाग लगाना है आपको और कुछ नहीं करना ठीक है क्योंकि खुरापाती दिमाग जब तक नहीं चलाओगे तब तक चीज़े नहीं आईगी समझ में ज

00:38:28content से run होते वे आते इदर से कभी left side से कभी right side से कभी पीछे से zoom होते वे आगया आते है कभी zoom होते वे पीछे चले जाते है तो मैं चाता हूँ कि मेरे पास ये जो है ये मेरे पास fed होता वाए तो अब देखो ये अपन कैसे रिखाएंगे ये अपन कैसे create करेंगे तो देखो animation

00:38:58अबने एक property पड़ी थी अपनी opacity opacity अपने पास अगर zero होती तो element hide हो जाता है और अगर one होती तो maximum होता है तो opacity की तुरू मैं इसको मैं यहां पर गोलता हूँ मेरा h1 tag है ठीक है उसको मैं यहां पर target किया और text align कर देता हूँ मैं आपर center में देता हूँ उसको ता कि center में चल �

00:39:28अब मैं यहां पर क्या चाता हूँ animation create करना तो मैं animation बनाता हूँ मैंने बुला add the red keyframes ठीक है और उसके अलावा अपन यहां पर कह देता है fed in यह कोई animation बना चाता हूँ from से to मैं यहां पर चलाना चाता हूँ मैंने बुला from से to आप यहां पर चला देना और from से to आप यहां प

00:39:58आप उसकी opacity यहाँ पर change करके

00:40:00क्या कर देना, one कर देना

00:40:02यह काम आप करो, ठीक है

00:40:03यह animation मैंने यहाँ पर बनाया, अब इस

00:40:06animation को इस पर लगाना है, तो मैं यहाँ पर बोलूँगा

00:40:07animation का name क्या है

00:40:09animation का name क्या है, animation का

00:40:12name है आपका, fed in

00:40:14वो animation का

00:40:16name पास कर दो, दूसरा

00:40:17आपके पास animation की duration क्या है

00:40:20तो मैं यहाँ पर animation की duration

00:40:21पास कर देता हूँ, मैं कहता हूँ

00:40:224 second की duration रखो आप अभी के लिए

00:40:25और यहाँ पर मैं animation का

00:40:27iteration count पास कर देता हूँ, और infinite कर देता हूँ

00:40:29ठीक है, तो देखो, आपके पास

00:40:31जो आपका h1 tag है, वो कुछ इस तरीकी से

00:40:47second केता हूँ, थोड़ा सा फास्ट हो, तो अच्छा लगेगा

00:40:49अब देखो, यहाँ पर इस तरीकी से दिखाई दे रहा है

00:40:51मैं चाहता हूँ, यह जूम भी हो

00:40:53ठीक है, तो यहाँ पर आप क्या बोलोगे, अपना

00:40:55transform लगा दो, और transform में आप क्या करोगे

00:40:57अपनी scale value दे दो, और scale को

00:41:00अपन 1 value दे देते है, ठीक है, और

00:41:02यहाँ पर मैं कहता हूँ, transform और

00:41:05transform मैं अपन यहाँ पर कहता है, अपना

00:41:07scale और scale में मैं आपकर कहता हूँ 1.5 कर दो आप इसको, ठीक है

00:41:11तो जैसे यह होगा, तो इस तरीके से

00:41:13आपके पास आपका animation हाएगा

00:41:15ठीक है

00:41:17तो यह ऐसे लग रहा है कि

00:41:19कोई अपन वो

00:41:20अपन editing करते हैं अगर आपने editing कभी देखी हो

00:41:23जैसे cap cut यह दर चीजे चलाई हो

00:41:25तो वहाँ पर जो भी अपन

00:41:27video edit करते हो उसमें animation अपने कुछ इस तरीके

00:41:29से दिखाई देता है ठीक है animated

00:41:31अपन animations लगाते है तो वो animation

00:41:33keyframe से ही बनते है

00:41:35अगर आपने कभी cap cut use करा हो

00:41:37तो उसमें आपने देखा होगा अपन keyframes

00:41:39set भी करते है उसके अंदर

00:41:40keyframes अपने को set करने पड़ते है कि क्या होगा

00:41:43keyframe तो coding के अंदर अपने

00:41:45keyframe खुद को ही लिखने पड़ते है

00:41:47कि क्या keyframe अपन set करना चाता है

00:41:49किस keyframe में आपका element

00:41:51क्या treat करे वो अपने को set

00:41:53करना पड़ता है ठीक है

00:41:54clear है यहां तक की

00:41:57चीच

00:41:58इशा करे कि sir spinner

00:42:01repeat ठीक है

00:42:02sks करे कि sir loader को एक बार फिर से

00:42:05पताना ठीक है वापस देख लेंगे

00:42:07कि कैसे भी कर सकते है

00:42:09आप चाते हो कि यह जो देवान शूसर आ रहा है

00:42:11यह नीचे से उपर आए

00:42:12फिर zoom होता हुआ दीके

00:42:14तो सबसे पहले आप इस पर लगा दो अपना

00:42:16transform आपने बोला transform

00:42:18आपने बोला translate

00:42:20y के अंदर

00:42:22इनीचली आप इसको ले जाओ

00:42:24बिल्कुल ही नीचे

00:42:25बिल्कुल ही नीचे मतलब 200

00:42:28percentage में नहीं आप लगा दिया

00:42:30और यहाँ पर

00:42:32मैं कह देता हूँ इस पर अपना transform

00:42:34और transform पर मैं यहाँ पर क्या लगा रहा हूँ अपना

00:42:42translate y

00:42:43ठीक है और

00:42:46यहाँ पर अपन कह देता है 50%

00:42:49अभी के लिए एक बार करके देखते हैं क्या होता है इसके अंदर

00:42:51मैं यहाँ पर आता हूँ तो देखो किस तरीके से अपने पास यहाँ पर यहाँ आ रहा है

00:42:55यह पूरा नीचे जा रहा है यहाँ तक आ रहा है

00:42:58लेकिन इसमें अब

00:42:59ट्रांस्फॉर्म दो दो लगा दिये पने एक ही ट्रांस्फॉर्म पर लगावाएंगे फिर दूसरा पनी यूज़ ओगा अपना

00:43:04जैसे मैं इस वाले को एक बार के लिए हटाता हूँ जो अपनी स्केल लगाया उसको पन अटाते है एक बार के लिए

00:43:09चीक है मैं यहाँ पर बोल रहाँ ट्रांस्फॉर्म अब देखो यह टेक्स आपके बास कुछ इस तरीके से आएगा

00:43:17चीक है जैसे मैं यहाँ पर गहता हूँ 10%

00:43:24तो देखो इस तरीके से मतलब आप ऐसे कोई चीज़े दिखाना चाते हो जैसे hero section आप देखते हो जैसे वो load होता है तो load होते है उसके अंदर सारे images चलती भी आती है चलती भी दिखती है तो वहाँ पर अपन यह animation यूज लेते हैं चीक है

00:43:41animation अगर आप advance पर सीखना चाते हो अलागी जरूत नहीं है अपने क्योंकि animation के लिए अलगी बंदा होता है जैसे आपने अगर netflix का logo देखा है

00:43:53नेट्फिक्स का logo दो देखा ही हुआ

00:43:57नेट्फिक्स नहीं चला है लेकिन अपन

00:43:59और मैं यहाँ पर आता हूँ उसके animation के उपड़ ठीक है और इसका अपन CSS का code निकालते हैं

00:44:09CSS code क्या है यह वो code pen के उपड़ आते हैं अब देखो आपने netflix का logo देखा हो बहुत netflix तो ऐसा कोई हो गाई नहीं बंदा जो चलाता ही नहीं है

00:44:20अब देखो यहाँ पर वह animation अपने पार से रन उतावाएगा एक minute तो दो को यह animation इस तरीके से आ रहा है सारी lines डिवाइड हो गई और यह animation ऐसे आ रहा है ठीक है जिसे मैं फिर से run करता हूँ तो दो को यह animation इस तरीके से run उतावा रहा है और यह क्या है यह HTML CSS में ही बनावा

00:44:50इनिशली क्या कर रहा है सब को जोड़े वे दिखा रहा है फिर जैसे ही वो आगे जा रहा है तो सब lines का color भी change हो रहा है और फिर उसके बाद वो सब zoom होती भी अपने को दिखाई दे रही है बदल स्कैल value लगा रखी होगी क्या क्या चीज़े कर रखी होगी देखो इसको ठ

00:45:20अगर आपको काफी है इतना ही अपन यूज करते है

00:45:27यहां तक की चीज के लिए रहे तो एक बार बताओ यहां तक की चीज के लिए रहे

00:45:52यहां तक की चीज के लिए रहे तो एक बार बताओ यहां तक की चीज के लिए रहे आगे बढ़ सकते

00:46:22सर इस्पीनर और एच्वन टैग नॉट किलियर ऐसा तो कुछ कराई नहीं अपने इस्पीनर कहां है अपना इस्पीनर यह रहा इस्पीनर में मैंने क्या किया ट्रांस्फॉर्म रोटेट मैंने फंक्शन आपको पड़ा रखा है अपने बोला कि इनिशली उसको जीरो डिग

00:46:52करो और चैक करो कैसा दिख रहा है या चुझेंगे नहीं आरेया का मैंने इसली इस्पीनर और अब मैं चाहता हूं

00:47:21कि जब मेरा animation यहां पर लगे तो वो rotate हो बस यहां पर animation का

00:47:25spin अपने यहां पर pass कर दिया duration पास कर दिया iteration count पास कर

00:47:29दिया तो यह ऐसे लगेगा कि रोटेट हो रहा है वस और कुछ नहीं है

00:47:34मैं सबसे easy animation इसमेजा कुछ है ही नहीं बस यह मेरे कुछ

00:47:37लग रहा है कि यह rotate हो रहा है ठीक है h1 टेक्ट पर पर ने लगा है उसमें मैंने क्या किया उसमें मैं ने बुला

00:47:46text align यह सारी चीजे करी और मैंने opacity लगाई और transform मैंने translate y करा है y direction के अंदर

00:47:52translate y अपना function है transform property मैंने पढ़ा ही थी अगर आपको याद हो तो हर एक function को मैंने explain कराता कि क्या काम आता है

00:48:00वो सारे function मैं यहाँ पर use कर रहा हूं जो भी मिरे transform के अंदर function आ रहे हैं

00:48:04यहाँ पर scale function यूज करा जो zoom in, zoom out करने के काम आता है user

00:48:13यहाँ पर function use करा वो translate, our element को move करने के काम आता थी थी तो वही तो काम कर रहे है

00:48:21तो यहाँ पर fed in में मैंने क्या बोला कि opacity initially from पे रखो 0 translate y करदो

00:48:27इस screen से बाहर 200 pixel मतलब screen से बाहर क्योंकि 100% ही होती है आपकी screen

00:48:33तो मैंने 200% बोला इस screen से बाहर रखो उसको

00:48:36जब वो 2 तक आए तब आप उसको 10% पर ले आना चीक है

00:48:40तो वो 10% पर ले के आ जाएगा उसको

00:48:42पूरा screen से बाहर है फिर वो उपर आ रहा है

00:48:44चीक है

00:48:48ऐसे ही देखो, और बनाते, चलो एक दूचीज और बनाते, फिर उसके बाद, अपने आगे कल वाली ग्लास में देखेंगे, और चीजे जो भी देखेंगे, अभी के लिए मैं एक काम करता हूँ, देखो मैं क्या गड़ने वाला हूँ, मैं यहाँ पर आता हूँ, मैं यहाँ �

00:49:18और इसके अंदर मैंने क्या दिया box 2。

00:49:22perfect!

00:49:23box1 के अंदर मैंने क्या दिया?

00:49:25box2 मेरे पस यहाँ पर है

00:49:29जल्दी से अंदर आपने इसको styling करता है

00:49:34मैं बोलता हूं box1 है मेरे पास

00:49:37इसको मैंने यहाँ टार्गिट किया

00:49:39उसके उपर मैंने border बनाइ

00:49:42कि आप four pixel की रखो solid रखो और black color की रखो border ठीक है उसके अलावा margin भी लगा दो ताकि थोड़ा सा अलग रख रहे हैं यह सबसे मैंने margin लगा दी और मैंने यहाँ पर 70

00:49:54pixel की margin लगा दी यहाँ पर आओ और यहाँ पर बोलो margin और आपने 70

00:50:02pixel की यहाँ पर margin लगा दी चीक है तो एक box आपके बास बन क्या आना चीए यहाँ परफेक्ट कोई रिकत नहीं है अच्छा लग रहा है अब यहाँ पर अपन क्या करेंगे इसको width में आपर पास कर देता हूं width में कह देता हूं कि आप इसकी width रखो कितनी 600 pixel परफेक्ट यहाँ

00:50:32600 pixel पोच जादा जा रहा है 300 pixel और 300 pixel में आपर देती इसकी width to height यह box मेरे पास यहाँ पर आ रहा है ठीक है अब मैं यहाँ पर क्या चाहता हूं कि मेरे पास यह जो box है इसके अंदर एक और box बनावा है अपना box 2 है बना लो उसको भी मैं आपर कहता हूं कि box 1 के अंदर box 2 भी मे

00:51:02width जैसे मैं आपर कहता हूं 100 pixel चीक है और height जो है वह मैं आपर कहता हूं 100 pixel देखो क्या बन किया रहा है वाँ पर यह box है इसके अंदर एक और box है चीक है अब देखो मैं changes क्या करो हमा इसके अंदर यह जो box है इसको मैं यहाँ पर border radius दे रहा हूं मैंने बुला border radius आप दो और �

00:51:32इसको भी border radius दो और इसको कितनी दो इसको भी 100% आप यहाँ पर दे दो

00:51:37चीक है मैंने ये box है इसको भी border radius दे दी इस box को भी border radius दे दी

00:51:45अब मैं यहाँ पर एक animation मनाना चाहता हूँ मिले को ऐसे लगना चाहिए कि ये इसके चारो तरफ चक्कर लगा रहा है

00:51:51मतलब इस पूरी radius के उपर चक्कर लगा रहा है ये box तो कैसे करोगे

00:51:56animation मनाना एक छोटा सा वो ही rotating करवाना है तो मैं यहाँ पर लिखूँगा

00:52:00add the red keyframes चीक है और मैंने उसके अंदर लिखा यहाँ पर run नाम का animation मनाता हूँ

00:52:06from से 2 ही मैं यहाँ पर चला रहा हूँ क्योंकि मैं को from से 2 ही काम है तो मैंने from से 2 यहाँ पर उस animation को चला रहा हूँ

00:52:12from के उपर मैंने यहाँ पर कह दिया है कि आपको क्या करना है ट्रांसफोर्म लगाना है और rotate करना है

00:52:18इनिशली आप रोटेट को रखो 0 क्योंकि इनिशली कोई rotation नहीं दिखा रहा है

00:52:21transform फिर से मैंने लगाया और मैंने बुला rotate और rotate में 360 degree rotate कर दो क्योंकि spinner की जैसे यह यह भी

00:52:28same ठीक है मैंने यह कह दिया अब यह किस पर लगाना है यह लगाना है आपको box 1 तो आपका constant रहेगा उसको नहीं करना में लेको

00:52:37box 2 को run किसको कराना पहले यह देखो यह जो box है यह से लगना चाहिए कि यह run हो रहा है चारो तरफ run हो रहा है

00:52:46यह कब होगा जब आप इस box को run कराओगे कि इसकी इस position पे fix है मैं इस वाले box को run कराओगा तो आपको यह जो box है यह इसके radius पे गूम रहा है

00:52:58ठीक है देखो कैसे मैं यहां पर आता हूँ और यह जो box one है इसको वो animation pass कर देता हूँ मैंने बुला animation name और क्या है run ठीक है first अपने यह पास कर दिया दूसरा मैं यहां पर animation की duration pass कर देता हूँ

00:53:17और duration जैसे मैं यहाँ पर पास कहता हूँ कि आप 3 second की duration अभी रखो initially और animation का जो iteration count है उसको मैं यहाँ पर कहता हूँ infinite कर दो आप ठीक है तो देखो अब आपको ऐसे लगेगा कि यह जो box है यह जो इसके अंदर यह ball बनी भी है यह इस radius पर गुम रही है लेकिन reality यह कि यह जो box

00:53:47अभी बड़ा smooth नहीं देख रहा है यह animation यह यह जो फिल्कुल बनीशन देख रहा है चीक है तो यह animation सी चीजे है जो पर ने आ पर देखी यहां तक की चीज के लिए रहे

00:54:08तो एक बार बताओ यह सर यहां तक की चीज के लिए रहे

00:54:10सर कुछ युनीक सा बनाएं एनिमेशन युनीक सा एनिमेशन आप बना सकते हो

00:54:21CSS एनिमेशन मैं यहाँ पर सर्च करूँगा

00:54:26ठीक है एनिमेड.css क्या बता रहा है यह

00:54:32Prismic पर आते हैं यह क्या दे रहा है यह देखो यह एनिमेशन बना हुआ है

00:54:46यह देखो Mac Everything, Lifestyle, Work, Awesome

00:54:55अगर आप इसका code देखो बड़ा ही easy एनिमेशन इसने बना रहा है यहाँ पर

00:55:00इसका HTML देखो एक divly रखा है उसके अंदर तीन divly रखे है

00:55:08CSS आप देखोगे इसने सिफ एनिमेशन बना रहा है यह लोग है इसने margin लगा रहा है और कुछ नहीं कर रहा है

00:55:14बस margin को यह set करता जा रहा है कल बता दूँगा यह कैसे बनेगा इनिमेशन ठीक है इसमें अनिमेशन किसने और कोई प्रोपर्टी जो पर ने नहीं पढ़िए भी फो लगा रहा है ठीक है इसने एक दू प्रोपर्टी जो पर ने नहीं देखी हुआ है यह simple text एनिमेशन है ठ

00:55:44जाना जो मैंने आपको बताई है अभी कौन सी website है प्रिज्मिक करके इस पर आना आपको और अच्छा लगेगा यह animation यह करसर ले जाने पर चल रहा है ठीक है जैसे यह animation और यह बहुत easy animation है कोई ऐसे नहीं कि बहुत tough animation है बहुत easy animation है यह ठीक है यहाँ पर देखो chill जैसे chill कर

00:56:14एपो बहुत easy animation है यह पर जैसे मैं करसर लेंगे जा रहा हू�ं तो यह आपको ओक्ण मेंग्रार ही प्रेख एक एस पने बहुत तक रहा ही हीड कर जैसा आप enter गए हिट कर तु ठीक है ज़हाँ पर पर मैं करसर लेंगे जा रहा रहा हम आपर यह work कर रहा है यह hover है यह देख

00:56:44बेसिक एनिमेशन है यह बेसिक इनको अगर आप टफ समझ रहे हो तो यह टफ नहीं है बहुत एजी है लेकिन इसको आप मेरी मानो तो अभी ना देखे कल जब मैं पूरा कम्प्लीट एनिमेशन पढ़ा दू उसके बाद आपको यह सारे एनिमेशन आप बना सकते हो यह जो भ

00:57:14कि मैं में को यह एनिमेशन कहीं पर लगाना है तो इसी को कोपी पेश्ट करके आप यूज कर सकते हो ठीक है तो यह बात हो गई

00:57:21ठीक है

00:57:24SKS कहरें कि सर आप एक अच्छा सा यूनिक सा बना दीजिए

00:57:27ठीक है कल बना लेंगे कल वाली क्लास में

00:57:29एनिमेशन यही का तब नहीं हुआ

00:57:30कल वाली क्लास में और देखेंगे अपन एनिमेशन को

00:57:32यहां तक की चीज के लिए रहे तो एक बार बताओ

00:57:35यहां तक की चीज के लिए रहे इसमें कोई डाउट नहीं है किसी को

00:57:37क्योंकि आज की क्लास अपन इदनी रख रहे फिर बाकि अपन कल वाली क्लास में डिसकस करेंगे

00:57:43आगी की चीज़े

00:57:44अटनेंस के पॉइंट बता देता हूं मैं आपको अटनेंस के पॉइंट बन के अंदर आपको मेंचन करना है

00:57:49और अठैंनि मेशन

00:57:50आदिते करें सर्ट जीस कप से स्टाट होगी

00:57:59जीस स्टाट होगी जब आपका

00:58:01CSS complete होगा

00:58:02bootstrap complete होगा

00:58:03उसके बाद JavaScript start होगी

00:58:05ठीक है

00:58:08attendance के point 1 के अंदर आपको mention करना है

00:58:10animation

00:58:31set ds से भी cover होगा course में नहीं

00:58:48अपने course में ds से नहीं है

00:58:49यह सिप मान स्टैक का course है

00:58:51ds से नहीं है

00:59:01best language कौन सा idea से के लिए

00:59:20best language है c++

00:59:21सबसब best language रहती है c++

00:59:24लेकिन आपको किसी एक में master करनी रहती है

00:59:26जैसे मालो python, java या फिर c++ में

00:59:29लेकिन c++ best language है

00:59:31ds से को समझने के लिए

00:59:32attendance के point number 2 के अंदर आपको mention करना है

00:59:38और वो mention करना है

00:59:41आपको spin

00:59:42जो पर ने spin वाला animation बनाया था

00:59:44आपको spin mention करना attendance के point 2 के अंदर

00:59:46यह आज की attendance का point 2 है

00:59:49job के लिए कौन सा best होगा c++ और java

01:00:00दोनों ही अपनी जगे best है

01:00:02दोनों ही अपनी जगे best है

01:00:05दोनों में ही बहुत अच्छा package है

01:00:06c++ भी best है

01:00:09java भी best है

01:00:10लेकिन c++ ज़्यादा best है

01:00:16अगर आपको concept बहुत अच्छे

01:00:19advanced level पे clear करने है

01:00:20demand ज़्यादा है अगर आपने लिए से

01:00:22c++ में किया है तो

01:00:24चीक है आज की class इतनी रखते है

01:00:38मिलते है फिर अपन अपनी next class के अंदर

01:00:40और interesting चीज़ों के साथ

01:00:41और interesting topics के साथ

01:00:42चीक है guys

01:00:44कल वाली class में आगे अपन

01:00:46complete करेंगे जो भी चीज़ी remaining ready उनको

01:00:48ओके thank you so much guys

01:00:51मिलते है फिर अपन अपनी next class के अंदर

01:00:53bye bye everyone and take care all

01:00:55सभी अपना ध्यान रखो

01:00:57good night

Day - 23 | CSS Animation | Keyframes, Animation Properties & Live Examples

Category

Transcript

Recommended