آن لائن ٹول CSS3 اینیمیشن جنریٹر

Animation

سست لوگوں کے لیے CSS اینیمیشن جنریٹر۔

CSS متحرک تصاویر

CSS جاوا اسکرپٹ یا فلیش کا استعمال کیے بغیر HTML عناصر کی حرکت پذیری کی اجازت دیتا ہے۔

اس باب میں آپ درج ذیل خصوصیات کے بارے میں جانیں گے:

  • @keyframes
  • اینیمیشن کا نام
  • حرکت پذیری کا دورانیہ
  • حرکت پذیری میں تاخیر
  • حرکت پذیری- تکرار- شمار
  • حرکت پذیری سمت
  • اینیمیشن ٹائمنگ فنکشن
  • اینیمیشن فل موڈ
  • حرکت پذیری

براؤزر کے مخصوص سابقے

کچھ پرانے براؤزرز کو اینیمیشن کی خصوصیات کو سمجھنے کے لیے مخصوص سابقے (-webkit-) کی ضرورت ہوتی ہے۔

 

سی ایس ایس اینیمیشنز کیا ہیں؟

ایک اینیمیشن ایک عنصر کو آہستہ آہستہ ایک انداز سے دوسرے انداز میں تبدیل کرنے دیتی ہے۔

آپ جتنی بار چاہیں سی ایس ایس کی خصوصیات تبدیل کر سکتے ہیں۔

CSS اینیمیشن استعمال کرنے کے لیے، آپ کو پہلے اینیمیشن کے لیے کچھ کلیدی فریموں کی وضاحت کرنی چاہیے۔

کلیدی فریموں میں مخصوص اوقات میں عنصر کی کیا طرزیں ہوں گی۔

 

@keyframes اصول

جب آپ @keyframes اصول کے اندر CSS اسٹائل کی وضاحت کرتے ہیں، تو اینیمیشن کچھ اوقات میں آہستہ آہستہ موجودہ اسٹائل سے نئے اسٹائل میں تبدیل ہوجائے گی۔