یہ مضمون ملٹی سٹیپ اینیمیشن اور ٹرانزیشن کو شامل کرنے کے عمل کو ظاہر کرتا ہے۔
ملٹی سٹیپ اینیمیشنز اور ٹرانزیشنز کا استعمال کیسے کریں؟
ملٹی سٹیپ اینیمیشن بنانے کے لیے، کی فریمز کی ایک سیریز تیار کی جاتی ہے۔ یہ منتخب کردہ HTML عنصر پر لاگو ہونے والی تبدیلیوں کی سیریز کی وضاحت کرتا ہے۔ ہر کلیدی فریم حرکت پذیری کی ایک مختلف حالت کی نمائندگی کرتا ہے، اور براؤزر آسانی سے عنصر کو ان ریاستوں کے درمیان منتقل کرتا ہے۔ ٹرانزیشن کے دوران، صارف کے تعاملات یا ریاست کی تبدیلیوں کے ذریعے ایک مخصوص مدت کے دوران CSS کی خصوصیات کی ہموار تبدیلی کی وضاحت کریں۔
آئیے بہتر تفہیم کے لیے ایک عملی مثال کے ذریعے چلتے ہیں:
مثال 1: ملٹی سٹیپ اینیمیشن کا اطلاق کرنا
اس مثال میں، ایک ملٹی سٹیپ اینیمیشن منتخب HTML عنصر پر لاگو ہونے جا رہی ہے۔ مندرجہ ذیل مظاہرے پر جائیں:
< انداز >
اینیمیشن مثال {
چوڑائی: 130px؛
اونچائی: 130px؛
پس منظر کا رنگ: جنگل کا سبز؛
پوزیشن: رشتہ دار
animation: moveAnimate 4s ease-in-out infinite;
}
< / انداز >
< جسم >
< div کلاس = 'انیمیشن کی مثال' >< / div >
< / جسم >
مندرجہ بالا کوڈ کے ٹکڑوں میں:
- سب سے پہلے، کلاس کا نام ' حرکت پذیری کی مثال ' کے اندر منتخب کیا جاتا ہے '