سی ایس ایس کی فریم متحرک تصاویر کیسے بنائیں۔

سی ایس ایس ڈویلپرز کو یہ اجازت دیتا ہے کہ وہ اپنے ویب پیجز کو کی فریم انیمیشن کا استعمال کرتے ہوئے زندہ کریں۔

CSS حرکت پذیری HTML عنصر کی ابتدائی حالت کو اس کی مختلف خصوصیات کے ذریعے تبدیل کرکے حاصل کی جاتی ہے۔ کچھ عام سی ایس ایس خصوصیات جو متحرک ہو سکتی ہیں ان میں شامل ہیں:

---

---

ٹک ٹاک پر الفاظ کیسے ڈالیں

• چوڑائی
• اونچائی۔
• پوزیشن
• رنگ
• دھندلاپن۔

یہ عام سی ایس ایس خواص مطلوبہ نتیجہ پیدا کرنے کے لیے مخصوص سی ایس ایس عناصر کے ذریعے ہیرا پھیری کرتے ہیں۔ اگر آپ نے کبھی کسی ویب پیج پر کسی اینیمیٹڈ عنصر کو دیکھا ہے تو ، امکانات یہ ہیں کہ عنصر کی فریم اینیمیشن کا استعمال کرتے ہوئے متحرک کیا گیا تھا۔

کی فریم عنصر کیا ہے؟

کی کلیدی فریم عنصر ایک یا زیادہ HTML عنصر پر استعمال کیا جا سکتا ہے جس تک اسے رسائی حاصل ہے۔ یہ ایک عنصر کی حالت میں ایک مخصوص نقطہ کی نشاندہی کرتا ہے اور اس ظاہری شکل کا تعین کرتا ہے جو اس وقت اس عنصر کا ہونا ضروری ہے۔

یہ ہضم کرنے میں بہت کچھ لگ سکتا ہے ، لیکن یہ حقیقت میں بہت آسان ہے۔ کی کلیدی فریم عنصر ایک بہت سیدھا سا ڈھانچہ ہے جسے کسی بھی حرکت پذیری کی ضروریات کے مطابق آسانی سے سمجھا اور ایڈجسٹ کیا جا سکتا ہے۔

کلیدی فریموں کی ساخت کی مثال


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

ہم کہتے ہیں کہ آپ سبز آئتاکار بٹن کو نیلے رنگ کے بٹن میں بدل کر متحرک کرنا چاہتے ہیں۔

کے پیرامیٹرز کے اندر۔ سے اوپر والے حصے میں آپ کو تمام اسٹائل رکھنے کی ضرورت ہوگی تاکہ عنصر کو سبز آئتاکار بٹن کی طرح نظر آئے ، پھر کو سیکشن میں ، آپ اس بٹن کو نیلے رنگ کے بٹن میں تبدیل کرنے کے لیے اسٹائل کی تمام ضروریات رکھیں گے۔

---

---

اگر آپ سوچ رہے ہیں تو ، یہ حرکت پذیری کی طرح زیادہ نہیں لگتا ہے۔ ٹھیک ہے ، اس کی وجہ یہ ہے کہ اس پورے عمل کا ایک کلیدی جزو ابھی متعارف کرایا گیا ہے --- یہ جزو حرکت پذیری کی خاصیت ہے۔

انیمیشن پراپرٹی۔

کی حرکت پذیری کی خاصیت مختلف ذیلی خصوصیات کا ایک سیٹ ہے یہ مطلوبہ ایچ ٹی ایم ایل عنصر کو متحرک کرنے کے لیے اوپر کی فریم ڈھانچے کے ساتھ مل کر استعمال ہوتے ہیں۔

---

---

تاہم ، آپ کو اپنے منصوبوں میں حرکت پذیری حاصل کرنے کے لیے ان میں سے پانچ ذیلی خصوصیات اور ان کے ساتھ وابستہ اقدار کو جاننے کی ضرورت ہے۔ ان خصوصیات کے طور پر جانا جاتا ہے:

• حرکت پذیری کا نام۔
• حرکت پذیری کا دورانیہ۔
• حرکت پذیری-ٹائمنگ فنکشن۔
• حرکت پذیری تاخیر۔
• حرکت پذیری-تکرار کی گنتی۔

ویب پیج پر حرکت پذیری کا استعمال

اوپر کے منظر نامے کا استعمال کرتے ہوئے ، مقصد ایک متحرک بٹن بنانا ہے۔

بٹن حرکت پذیری کی مثال







Animation

/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}




Click!




مذکورہ کوڈ کے اینیمیشن سیکشن میں پانچ ذیلی خصوصیات ہیں جن کا پہلے ذکر کیا گیا تھا۔ ہر پراپرٹی کا ایک الگ الگ فنکشن ہوتا ہے اور وہ مل کر کسی بھی HTML عنصر کو متحرک کرنے کے لیے کام کرتے ہیں جسے وہ ہدف بنانے کے لیے بنائے جاتے ہیں۔

متعلقہ: سی ایس ایس سلیکٹرز کا استعمال کرتے ہوئے ویب پیج کے حصے کو کیسے نشانہ بنایا جائے۔

حرکت پذیری نام کی پراپرٹی۔

یہ پراپرٹی فہرست میں سب سے اہم پراپرٹی ہے۔ کے بغیر حرکت پذیری نام کی پراپرٹی ، آپ کے پاس ماضی کا کوئی شناخت کنندہ نہیں ہوگا۔ کلیدی فریم عنصر ، تمام کوڈ کو اس کے پیرامیٹرز کے اندر بیکار بنا رہا ہے۔

اگر آپ دوسری ذیلی خصوصیات میں سے ایک یا دو کو شامل کرنا بھول گئے ہیں تو پھر بھی آپ کو کافی مہذب حرکت پذیری مل سکتی ہے۔ تاہم ، اگر آپ بھول گئے ہیں۔ حرکت پذیری نام کی پراپرٹی آپ کے پاس کوئی حرکت پذیری نہیں ہوگی۔

حرکت پذیری کی مدت پراپرٹی۔

اس پراپرٹی کو ایک ریاست سے دوسری حالت میں منتقل ہوتے وقت ایک متحرک عنصر کو کتنا وقت چاہیے اس کی وضاحت کے لیے استعمال کیا جاتا ہے۔

اوپر کی مثال میں ، حرکت پذیری کی مدت 5 سیکنڈ (5 سیکنڈ) پر سیٹ ہے ، لہذا سبز آئتاکار بٹن مکمل نیلے رنگ کا بٹن بننے سے پہلے 5 سیکنڈ کا ہوگا۔

حرکت پذیری تاخیر کی پراپرٹی۔

یہ پراپرٹی ایک وجہ سے اہم ہے۔ کچھ ویب صفحات مکمل طور پر لوڈ ہونے میں چند سیکنڈ لگ سکتے ہیں (کئی مختلف عوامل کی وجہ سے)۔ تو حرکت پذیری تاخیر پراپرٹی۔ اینیمیشن کو فوری طور پر شروع ہونے سے روکتا ہے صرف اس صورت میں جب ویب پیج کو لوڈ ہونے میں کچھ وقت لگے۔

اوپر کی مثال میں ، حرکت پذیری تاخیر پراپرٹی۔ 4s پر سیٹ کیا گیا ہے ، جس کا مطلب ہے کہ ویب پیج وزٹ ہونے کے 4 سیکنڈ بعد تک اینیمیشن شروع نہیں ہوگی (ویب پیج کو اینیمیشن شروع ہونے سے پہلے لوڈ کرنے کے لیے کافی وقت دینا)۔

حرکت پذیری-تکرار کی گنتی کی پراپرٹی۔

یہ پراپرٹی بتاتی ہے کہ متحرک عنصر کو ایک ریاست سے دوسری حالت میں کتنی بار منتقل ہونا چاہیے۔ کی حرکت پذیری-تکرار کی گنتی کی پراپرٹی۔ اقدار لیتے ہیں جو الفاظ اور اعداد ہیں۔ نمبر ویلیو 1 سے اوپر کی طرف کچھ بھی ہو سکتا ہے ، جبکہ لفظ ویلیو عام طور پر ہوتا ہے۔ لامحدود .

اوپر کی مثال میں ، حرکت پذیری-تکرار کی گنتی کی قیمت۔ پر سیٹ ہے لامحدود ، جس کا مطلب یہ ہے کہ جب تک ویب پیج اوپر ہے بٹن پراپرٹی ایک ریاست سے دوسری حالت میں مسلسل متحرک رہے گی۔

انیمیشن ٹائمنگ فنکشن پراپرٹی۔

یہ پراپرٹی متحرک عنصر کی حرکت کا حکم دیتی ہے کیونکہ یہ ایک ریاست سے دوسری حالت میں منتقل ہوتی ہے۔ کی حرکت پذیری ٹائمنگ فنکشن پراپرٹی۔ عام طور پر تین آسان اقدار میں سے ایک تفویض کیا جاتا ہے۔

• آسانی میں
• آسانی سے۔
• آسانی سے باہر۔

کی آسانی سے باہر کی قیمت اوپر استعمال کیا جاتا ہے یہ آہستہ آہستہ حرکت پذیری کو ایک حالت سے دوسری حالت میں منتقل کرتا ہے۔ اگر ہدف ایک آہستہ منتقلی بنانا ہے جب بٹن سبز مستطیل سے نیلے دائرے میں تبدیل ہو رہا ہو تو آپ استعمال کریں گے آسانی سے قیمت . اگر آپ صرف مخالف سمت میں سست منتقلی چاہتے ہیں تو آپ استعمال کریں گے۔ آسانی سے باہر کی قیمت .

ہمارے کوڈ کو کم کرنا۔

زیادہ تر مثالوں میں ، پروگرام کی لمبائی کو کم کرنا ایک عملی نقطہ نظر کے طور پر دیکھا جاتا ہے۔ اس کی بنیادی وجہ یہ ہے کہ کوڈ کی کم لائنیں آپ کے پروگراموں میں غلطیوں کا دھیان نہ جانے کے امکان کو کم کرتی ہیں۔

مندرجہ بالا کوڈ کو چار لائنوں سے کم کیا جا سکتا ہے۔ یہ محض اینیمیشن پراپرٹی کا استعمال کرکے حاصل کیا جاسکتا ہے بغیر اس کی ہر ذیلی خصوصیات کی واضح طور پر شناخت کیے۔

بٹن حرکت پذیری کے کوڈ کو کم کرنے کی مثال۔







Animation

/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}