متحرک سازی عناصر در CSS

برخی از ویژگی های زبان CSS قابل متحرک سازی یا Animatable می باشند، این یعنی ما میتونیم از انیمیشن ها ( Animations ) و ترنزیشین ها ( Transitions ) بروی این ویژگی ها استفاده نماییم.

بفرض مثال ما میتونیم با استفاده از ویژگی animation مشخص نماییم که در یک مدت زمان مشخص رنگ زمینه ی یک عنصر به تدریج ( براساس زمان ) تغییر کند ، و یا مثلا با استفاده از ویژگی transition میتوانیم مشخص کنیم که وقتی ماوس بروی یک عنصر میرود آن عنصر با افکت انتقال به آرامی گوشه هایش گرد شود و…

Free-Learn

پشتیبانی مرورگرها از متحرک سازی عناصر در CSS

در جدول زیر یک عدد از نسخه یا ورژن مرورگرهای اینترنتی وجود داره که داره میگه این مرورگرها از اون نسخه به بعد از انیمیشن ها ( Animations ) و ترنزیشین ها ( Transitions ) پشتیبانی میکند.

Chrome Firefox Opera Safari IE
۴۳٫۰ ۱۶٫۰ ۳۰٫۰ ۹٫۰ ۱۰٫۰

 

حال باید یه فکری برای نسخه های قبل تر و قدیمی تر این مرورگرها برای پشتیبانی از این ویژگی ها هم کرد، در نتیجه ما باید از یسری دستورات پیشوندی برای پشتیبانی کامل مرورگرها از این ویژگی ها استفاده نماییم.

  • -webkit-   | برای مرورگر گوگل کروم
  • -webkit-   | برای مرورگر سافاری
  • -webkit-   | برای مرورگر اوپرا
  • -o-         | برای مرورگر اوپرا
  • -moz-     | برای مرورگر موزیلا فایرفاکس
Chrome Firefox Opera Safari IE
۴٫۰ به بالا با -webkit- ۵٫۰ به بالا با -moz- ۱۵٫۰ به بالا با -webkit-
۱۲٫۰ به بالا با -o-
۴٫۰ به بالا با -webkit-

 

Free-Learn

مثال از متحرک سازی عناصر در CSS

امتحان کنید