یادداشت‌ها

انیمیشن با 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;
}

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