ایجاد: ۲۰:۲۴ ۱۳۹۲/۸/۸
ویرایش: ۷:۰۷ ۱۳۹۴/۵/۳

یادداشت‌ها

»

انیمیشن با CSS

سال‌ها پیش که CSS نسخه 3 و html نسخه 5 آمده بود، ما برای تفریح به نمونه قابلیت‌های آن می‌پرداختیم اما امروزه بیش از 90 درصد کاربران از براوزرهای مدرن استفاده می‌کنند و یادگیری آن، علاوه بر زیبایی طراحی، موجب صرفه‌جویی در بخش زیادی از js هایی می‌شود که برای تولید افکت رویدادهای مختلف نوشته می‌شد مثل js های مولد انیمیشن. و به دلیل built-in بودن آن، طبعا اجرای انیمیشن‌های CSS نرم‌تر از js خواهد بود.

transition و animation دونمونه از این قابلیت‌هاست که در تمامی براوزرهای مدرن پشتیبانی می‌شود. مثلا اگر بخواهید زمانی که یک کلاس به المان شما اضافه شد، یا زمانی که موس روی لینک‌ها رفت، رنگ متن و بکگراندش تغییر کند، می‌توانید با کمک CSS2 این کار را انجام دهید اما اگر بخواهید این کار با کمی انیمیشن و طی مثلا 1 یا 2 ثانیه انجام شود، می‌توانید یک خط به کدتان اضافه کنید:

.myClass, a:hover{
    color:#123;
    background-color:#def;
    transition:color 1s linear, background-color 2s ease;
    -webkit-transition:color 1s linear, background-color 2s ease;
}
البته برای مرورگرهای اندرویدی لازم است از پیشوند -webkit- استفاده شود و لذا خط آخر کد فوق برای همین با پیشوند -webkit- تکرار شده است.

دقت کنید که انیمیشن‌های CSS در اکثر موارد برای زیباتر شدن صفحه ما کاربرد دارد و اگر هم براوزر کاربر آن را پشتیبانی نکند، مشکلی پیش نمی‌آید هرچند همانطور که گفته شد، براوزرهای مدرن همگی html5, CSS3 را پشتیبانی می‌کنند و براوزرهای قدیمی (مانند IE8) حتی توسط سایت‌های معروفی همچون جیمیل نیز به صورت کامل و درست پشتیبانی نمی‌شود.
برای آشنایی مقدماتی با این مبحث این مطلب را ببینید و برای درک عمیق‌تر انیمیشن در CSS3 می‌توانید این مقاله را مطالعه کنید.

برخی کاربردهای رایج انیمیشن‌های CSS در طراحی وب

  • انیمیشن‌های لودینگ
    این انیمیشن‌ها عمدتا برای نمایش انتظار انجام درخواست ای‌جکسی کاربرد دارد) که در مطلب روش حذف درخواست loading به آن پرداختم و چند نمونه سایت برای تولید (Generate) کدهای آن معرفی کردم.
  • افکت روی نمایش/اخفای یک المان بعد از اضافه شدن یک کلاس به آن
    در این زمینه، Animate.css سنگ تمام گذاشته و ده‌ها نمونه انیمیشن زیبا برای این منظور را در یک فایل css چهل کیلوبایتی گنجانده که شما با افزودن آن به صفحه خود می‌توانید به سادگی آن را در هر جا نیاز داشتید استفاده کنید.
    پروژه AniJS نیز بر مبنای Animate.css تهیه شده است.
  • افکت روی یک المان بعد از رفتن موس روی آن
    پروژه Hover.css مشابه پروژه فوق است که افکت‌های مختلف css3 برای hover را برای شما فراهم و در یک جا جمع کرده است.
    خانم ماری‌لو هم در این صفحه و این صفحه تعدادی افکت انیمیشنی زیبا با css3 را برای لینک‌ها فراهم آورده است.

چند نمونه زیبا و آموزشی:

Vincent Tantardini در این مطلب جدید خود، پس از آموزش مختصر انیمیشن در CSS یک نمونه چشم‌نواز تهیه کرده است که توصیه می‌کنم دیدنش را از دست ندهید.

در این مطلب نیز می‌توانید 20 نمونه و آموزش را در این خصوص مشاهده کنید. اینجا نیز یک مجموعه آموزشی پایه خوب گردآوری شده است که برای یادگیری توصیه می‌شود.

محسن حسینیان نیز در مطلب «سه گام برای استفاده از انیمیشن و افکت ها در وب و رابط کاربری» به توضیح مراحل و روند استفاده از انیمیشن‌ها در صفحات وب پرداخته است.


یادداشت‌های مرتبط
  1. کشیدن و انداختن (رها کردن)
  2. گرافیک برداری
  3. سرویس های آنلاین رایگان برای نوشتن، تست و بهینه سازی کدهای برنامه نویسی
  4. برنامه‌های تحت وب آفلاین، چرا و چگونه؟
  5. نمودارها در صفحات وب
  6. استفاده از فونت دلخواه در صفحات وب
  7. نقشه Google در سایت شما
  8. ابرکوکی و ذخیره‌ساز جدید HTML5
  9. طراحی وب واکنشی
  10. روش های بهبود کیفیت آپلود فایل ها از طریق فرم های صفحات وب
  11. کار با قابلیت Page Visibility و کاربردهای آن
  12. اعتبارسنجی و شکل‌دهی فرم‌ها با استفاده از html5
  13. حذف درخواست اضافه تصویر انیمیشن لودینگ
  14. ادیتورهای محتوای غنی‌شده برای صفحات وب
  15. html نسخه 5
  16. پخش‌کننده‌های فایل صوتی تصویری در صفحات وب
  17. برنامه نویسی اندروید
  18. روش‌ها و تکنیک‌های پنهان کردن ایمیل
  19. کار با تصاویر در سمت کاربر
  20. هنر css نویسی (نکاتی برای بهتر نوشتن استایل صفحات وب)
  21. بهینه سازی آنلاین سی‌اس‌اس و جاوا اسکریپت
  22. استفاده از Media Queries ها و اصلاح عدم پشتیبانی IE6-8
  23. نکات و ترفندهایی برای قالب‌دهی به نمای چاپ صفحات وب

مدیریت

نام وسیله

اعتبار ورود

نام کاربری

رمز عبور

رمز یکبارمصرف

... لیست تمام یادداشت‌ها

تبلیغات

ربات‌های تلگرامی:
مجموعه ربات‌های تلگرامی ما برای ساده‌تر کردن کار با تلگرام و مدیریت کانال و ...
خرید هاست (فضا):
دنبال یک هاست به صرفه برای شروع کار می‌گردید؟
مشخصات و قیمت‌های این مورد رو ببینید. من سال‌ها مشتری‌شون بودم و پشتیبانی‌شون هم خوب بود.
دامنه‌های فروشی:
دامنه‌های زیر مربوط به ما یا مشتریان ماست که قابل فروش هستند. در صورت تمایل به خرید یکی از آنها، مبلغ پیشنهادی را از طریق فرم ارتباطی برای ما ارسال نمایید.

دامنه‌هایی که می‌تواند مصرف مذهبی داشته باشد:
دامنه‌هایی که می‌تواند مصرف تخصصی داشته باشد:
دامنه‌هایی که می‌تواند مصرف شخصی/عمومی داشته باشد: